/* Roundo — the ring as identity: mark, intro, page flow, cursor, ornaments. Loaded last. */
@property --hole { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }

/* ---------- wordmark ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; direction: ltr; }
.logo b { font-weight: 400; }
.mark { width: 30px; height: 27px; flex: none; overflow: visible; }
.mark circle { transform-origin: 20px 20px; transition: transform .7s var(--ease); }
.logo:hover .mark circle:nth-child(1) { transform: translateY(4px); }
.logo:hover .mark circle:nth-child(2) { transform: translate(4px, -2px); }
.logo:hover .mark circle:nth-child(3) { transform: translate(-4px, -2px); }

/* ---------- intro: three rings draw, then a hole opens onto the site ---------- */
#intro { position: fixed; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center; gap: 14px; background: #1c1a17; color: #f1e7d8;
  -webkit-mask: radial-gradient(circle at 50% 46%, transparent var(--hole), #000 calc(var(--hole) + 1px)); mask: radial-gradient(circle at 50% 46%, transparent var(--hole), #000 calc(var(--hole) + 1px)); transition: --hole 1.2s cubic-bezier(.7, 0, .2, 1); }
#intro.out { --hole: 150vmax; pointer-events: none; }
.seen #intro { display: none; }
#intro svg { width: min(46vw, 230px); stroke: currentColor; stroke-width: .8; overflow: visible; }
#intro circle { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.5s cubic-bezier(.6, 0, .2, 1) forwards; transform-origin: 100px 100px; }
#intro .i2 { animation-delay: .22s; }
#intro .i3 { animation-delay: .44s; }
#intro svg { animation: gather 1.1s cubic-bezier(.6, 0, .2, 1) 1.5s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes gather { to { transform: rotate(120deg) scale(.82); } }
#intro b { font: 400 clamp(34px, 6vw, 58px)/1 var(--serif); letter-spacing: .16em; direction: ltr; animation: rise 1s var(--ease) .7s both; }
#intro b i { font-style: italic; }
#intro span { font-size: 12.5px; letter-spacing: .1em; opacity: .7; animation: rise 1s var(--ease) 1s both; }

/* ---------- page flow: the new page opens as a circle from the click ---------- */
.vt::view-transition-old(root) { animation: vt-out .55s ease both; }
.vt::view-transition-new(root) { animation: vt-in .8s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes vt-out { to { filter: blur(10px) brightness(.92); transform: scale(.985); } }
@keyframes vt-in { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); } }
.vt #app.enter { animation: none; }

/* ---------- cursor ring ---------- */
#cursor { position: fixed; top: 0; left: 0; z-index: 400; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid #fff; border-radius: 50%; pointer-events: none; mix-blend-mode: difference; opacity: 0; scale: 1; transition: scale .35s var(--ease), opacity .3s, background .3s; }
#cursor.on { opacity: .9; }
#cursor.big { scale: 1.9; background: rgba(255, 255, 255, .12); }

/* ---------- scroll ring ---------- */
#toTop { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 60; width: 50px; height: 50px; border-radius: 50%; background: rgba(251, 249, 246, .7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--ink); opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity .4s, translate .4s var(--ease); }
#toTop.on { opacity: 1; translate: 0 0; pointer-events: auto; }
#toTop svg { width: 100%; height: 100%; fill: none; stroke: var(--line); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#toTop .bar { stroke: var(--ink); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--prog, 0)); transform: rotate(-90deg); transform-origin: 24px 24px; }
#toTop path { stroke: var(--ink); }

/* ---------- small ring details ---------- */
.eyebrow::before { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; background: none; box-shadow: 14px 0 0 -4px currentColor; margin-inline-end: 10px; }
[dir=rtl] .eyebrow::before { box-shadow: -14px 0 0 -4px currentColor; }
.pips i { width: 8px; height: 8px; border-radius: 50%; background: none; border: 1px solid var(--ink2); }
.pips i.on { width: 8px; background: var(--ink); border-color: var(--ink); scale: 1.3; }
.dot { animation: ping 2.8s ease-out infinite; }
.dot:hover, .dot:focus { animation: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 0 rgba(255, 255, 255, .5); } 70%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 16px rgba(255, 255, 255, 0); } }
.spinner { border-width: 1px; }
.nav { border: 1px solid var(--line); }

/* ---------- page headers: big thin title + ring ornament beside it ---------- */
.sec.big { position: relative; display: grid; align-content: end; gap: 10px; min-height: clamp(190px, 26vw, 300px); margin: -44px 0 34px; padding: 40px 0 34px; border-bottom: 1px solid var(--line); overflow: hidden; }
.sec.big.row { display: flex; align-items: end; }
.sec.big h1 { font-size: clamp(38px, 6vw, 92px); font-weight: 200; letter-spacing: -.02em; line-height: 1.15; }
[dir=ltr] .sec.big h1 { font-family: var(--serif); font-weight: 400; line-height: 1; }
.sec.big p { max-width: 60ch; font-size: 15.5px; }
.sec.big > :not(.orn) { position: relative; z-index: 1; }
.orn { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(46%, 520px); pointer-events: none; color: var(--tan); }
.orn > i { position: absolute; top: 50%; inset-inline-end: -14%; width: 118%; aspect-ratio: 1; translate: 0 -50%; border: 1px solid var(--line); border-radius: 50%; }
.orn > i + i { width: 74%; inset-inline-end: 8%; border-color: var(--tan-soft); }
.badge-ring { position: absolute; top: 50%; inset-inline-end: 18%; width: clamp(110px, 13vw, 170px); translate: 0 -50%; direction: ltr; overflow: visible; }
.badge-ring text { font: 400 15px var(--serif); letter-spacing: .12em; fill: var(--ink2); animation: spin 40s linear infinite; transform-origin: 100px 100px; }
.badge-ring circle { fill: none; stroke: var(--tan); stroke-width: .8; }
.badge-ring .core { fill: var(--ink); stroke: none; }

/* ---------- hero: a slow orbit behind the floating cards ---------- */
.hero-ring { position: absolute; top: 50%; inset-inline-end: 3%; width: min(78vh, 46vw); aspect-ratio: 1; translate: calc(var(--mx) * 20px) calc(-52% + var(--my) * 20px); border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; pointer-events: none; opacity: calc(1 - var(--p) * 1.6); transition: translate 1s ease-out; }
.hero-ring::before { content: ''; position: absolute; inset: 13%; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; }
.hero-ring i { position: absolute; inset: -1px; border-radius: 50%; animation: spin 38s linear infinite; }
.hero-ring i::before { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 4px rgba(255, 255, 255, .5); }

/* ---------- brand page: glass plate over the film ---------- */
.b-hero { position: relative; }
.b-hero img { height: min(62vh, 620px); border-radius: 28px; }
.b-head { position: relative; margin: -110px clamp(12px, 3vw, 44px) 0; padding: 30px clamp(20px, 3vw, 40px); border-radius: 28px; background: rgba(251, 249, 246, .74); -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 40px 80px -50px rgba(60, 45, 25, .5); }
.collections a { border-radius: 24px; }

/* ---------- architect: portrait as a ring ---------- */
.a-card { justify-items: center; text-align: center; padding-top: 48px; }
.a-card > p, .a-card dl { text-align: start; }
.portrait { width: 190px; aspect-ratio: 1; margin: 20px auto 24px !important; border-radius: 50%; font-size: 84px; box-shadow: 0 0 0 12px var(--surface), 0 0 0 13px var(--tan), 0 0 0 30px var(--surface), 0 0 0 31px var(--line); }
.card.arch .thumbs img:first-child { border-radius: 14px; }
.card.arch .avatar, .who .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--tan); }
.me-head > .avatar { box-shadow: 0 0 0 10px var(--bg), 0 0 0 11px var(--tan), 0 0 0 24px var(--bg), 0 0 0 25px var(--line); margin: 26px; }

/* ---------- cards & panels: softer, more editorial ---------- */
.card.brand { border-radius: 24px; }
.card.brand img { transition: transform 1.2s var(--ease); }
.card.brand:hover img { transform: scale(1.05); }
.card.brand { overflow: hidden; }
.card.brand .blogo { font-size: 30px; font-weight: 200; }
.card.board { border-radius: 24px; }
.card.board.new span { border: 1px solid var(--tan); background: none; }
.ai-box { border-radius: 24px; }
.chip-btn { transition: .25s var(--ease); }
.chip-btn:hover { translate: 0 -1px; }
.tabs a { font-weight: 300; font-size: 19px; }
.empty { border-radius: 28px; }
.empty::before { content: ''; width: 64px; aspect-ratio: 1; border: 1px solid var(--tan); border-radius: 50%; box-shadow: 22px 0 0 -1px var(--surface), 22px 0 0 0 var(--tan); margin-inline-end: 22px; margin-bottom: 10px; }
.donut { box-shadow: 0 0 0 10px var(--surface), 0 0 0 11px var(--line); }
.kpi { position: relative; overflow: hidden; }
.kpi::after { content: ''; position: absolute; top: -34px; inset-inline-end: -34px; width: 96px; aspect-ratio: 1; border: 1px solid var(--tan-soft); border-radius: 50%; }

/* ---------- footer ---------- */
#footer { position: relative; overflow: hidden; padding-bottom: 0; }
.foot-mark { grid-column: 1 / -1; direction: ltr; text-align: center; font: 400 clamp(90px, 21vw, 330px)/.78 var(--serif); letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px var(--tan); margin-top: 20px; margin-bottom: -.12em; user-select: none; }

@media (max-width: 1100px) { .hero-ring { display: none; } .orn { opacity: .55; } }
@media (max-width: 680px) { .sec.big { margin-top: -30px; } .b-head { margin-top: -60px; } .badge-ring { display: none; } #toTop { bottom: 14px; inset-inline-start: 14px; } }
@media (prefers-reduced-motion: reduce) { #intro { display: none; } .dot { animation: none; } }
@media print { #intro, #cursor, #toTop { display: none !important; } }