/* Novera 1.7 / motion layer: work reel, sideways statement, orbit, reveals, cursor. Same type and colours as agency.css. */
:root{--hh:82px;--dim:color-mix(in srgb,var(--ink) 16%,var(--bg))}
@media(max-width:1000px){:root{--hh:70px}}
@media(max-width:650px){:root{--hh:64px}}

/* Hero: live Istanbul time. */
.hero-clock:not(:empty){margin-left:22px}
.hero-clock:not(:empty):before{content:'';display:inline-block;width:6px;height:6px;margin:0 8px 2px 0;border-radius:50%;background:var(--accent);vertical-align:middle;animation:nv-blink 2.4s steps(1) infinite}

/* Showcase reel under the hero: work cards on a 3D carousel. Without JS (or with reduce motion) it is a swipeable row. */
.reel-chapter{--card:clamp(230px,23vw,340px);position:relative;z-index:2;background:var(--bg);padding:clamp(34px,4vw,56px) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--line);overflow:clip}
.reel-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(18px,2.4vw,34px)}
.reel-nav{display:flex;align-items:center;gap:8px}
.reel-count{font-size:11px;font-weight:600;letter-spacing:.06em;margin-right:14px;font-variant-numeric:tabular-nums}
.reel-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ink);background:transparent;color:var(--ink);font:500 18px/1 var(--font);cursor:pointer;transition:background .2s,color .2s}
.reel-btn:hover,.reel-btn:focus-visible{background:var(--ink);color:var(--bg)}
.reel-track{list-style:none;margin:0;padding:0 var(--gutter) 6px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.reel-track::-webkit-scrollbar{display:none}
.reel-card{flex:0 0 var(--card);scroll-snap-align:center}
.reel-card a{display:block;color:var(--ink)}
.reel-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--bg-3);user-select:none;-webkit-user-drag:none}
.reel-caption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:14px}
.reel-caption strong{font-size:16px;font-weight:500;letter-spacing:-.03em}
.reel-caption span{font-size:11px;color:var(--ink-2);text-align:right}
.reel-chapter.is-3d .reel-stage{position:relative;height:calc(var(--card)*1.25 + 52px);perspective:1500px;touch-action:pan-y;cursor:grab}
.reel-chapter.is-3d .reel-stage.is-dragging{cursor:grabbing}
.reel-chapter.is-3d .reel-track{position:absolute;inset:0;display:block;overflow:visible;padding:0;transform-style:preserve-3d}
.reel-chapter.is-3d .reel-card{position:absolute;left:50%;top:0;width:var(--card);margin-left:calc(var(--card)/-2);transform-style:preserve-3d;transition:transform .9s cubic-bezier(.22,.7,.2,1),opacity .6s;will-change:transform}
.reel-chapter.is-3d .reel-stage.is-dragging .reel-card,.reel-chapter.is-3d:not(.is-ready) .reel-card,.reel-chapter.is-3d:not(.is-ready) .reel-caption{transition:none}
.reel-chapter.is-3d .reel-card img{box-shadow:12px 16px 0 #1717151a}
.reel-chapter.is-3d .reel-caption{transition:opacity .4s}
.reel-chapter.is-3d .reel-card:not(.is-active) .reel-caption{opacity:0}
.reel-chapter:not(.is-3d) .reel-nav{display:none}
@media(max-width:650px){.reel-chapter{--card:66vw}.reel-top{align-items:flex-end}.reel-top .chapter-label{max-width:24ch}.reel-btn{width:38px;height:38px}.reel-count{margin-right:6px}}

/* One sentence, read sideways while the page scrolls (desktop); wraps on phones. */
.statement-chapter{position:relative;z-index:1;background:var(--bg);border-bottom:1px solid var(--line)}
.statement-sticky{display:flex;flex-direction:column;justify-content:center;gap:clamp(30px,6vh,70px);padding-block:clamp(64px,9vh,110px)}
.statement-meta,.statement-foot{display:flex;justify-content:space-between;align-items:center;gap:28px}
.statement-track{overflow:clip}
.statement-line{font-family:var(--display);font-weight:400;font-size:clamp(66px,11.5vw,200px);line-height:1.18;letter-spacing:-.012em;text-transform:uppercase;text-wrap:initial;padding:0.04em var(--gutter) 0}
.sw{position:relative;z-index:0;display:inline-block;transition:color .35s ease}
.sw.is-key:after{content:'';position:absolute;left:-1.5%;right:-1.5%;bottom:.15em;height:.1em;background:var(--accent);z-index:-1;transform:rotate(-2deg);transform-origin:left center;transition:scale .55s cubic-bezier(.2,.7,.2,1)}
.statement-progress{position:relative;flex:1;max-width:360px;height:2px;background:var(--line);overflow:hidden}
.statement-progress i{position:absolute;inset:0;background:var(--ink);transform-origin:left center;transform:scaleX(var(--p,1))}
.nv-motion .statement-chapter.is-live .sw{color:var(--dim)}
.nv-motion .statement-chapter.is-live .sw.is-lit{color:var(--ink)}
.nv-motion .statement-chapter.is-live .sw.is-key:after{scale:0 1}
.nv-motion .statement-chapter.is-live .sw.is-key.is-lit:after{scale:1 1}
.nv-motion .statement-chapter.is-pinned .statement-sticky{position:sticky;top:var(--hh);height:calc(100svh - var(--hh));min-height:520px;padding-block:28px}
.nv-motion .statement-chapter.is-pinned .statement-line{width:max-content;white-space:nowrap;padding-left:42vw;padding-right:30vw;will-change:transform}
@media(max-width:650px){.statement-line{font-size:17.5vw;line-height:1.2}.statement-meta>span:last-child{display:none}.statement-progress{display:none}}

/* Orbit: four steps, the ring turns one quarter per step. */
.orbit-chapter{position:relative;background:var(--bg);border-top:1px solid var(--line)}
.orbit-sticky{padding-block:clamp(70px,9vw,120px)}
.orbit-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;align-items:center}
.orbit-copy h2{font-family:var(--display);font-weight:400;font-size:clamp(60px,7.4vw,122px);line-height:1.16;letter-spacing:-.015em;text-transform:uppercase;margin:30px 0 40px;padding-top:.04em}
.orbit-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.orbit-steps li{display:grid;grid-template-columns:42px minmax(120px,170px) minmax(0,1fr);gap:16px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--line);transition:color .35s,padding-left .35s}
.orbit-n{font-size:10px;font-weight:600;letter-spacing:.06em}
.orbit-steps strong{font-size:21px;font-weight:600;letter-spacing:-.035em}
.orbit-steps li>span:last-child{font-size:15px;line-height:1.45;color:var(--ink-2);transition:color .35s}
.nv-motion .orbit-chapter.is-live .orbit-steps li{color:var(--dim)}
.nv-motion .orbit-chapter.is-live .orbit-steps li>span:last-child{color:var(--dim)}
.nv-motion .orbit-chapter.is-live .orbit-steps li.is-active{color:var(--ink);padding-left:14px}
.nv-motion .orbit-chapter.is-live .orbit-steps li.is-active>span:last-child{color:var(--ink-2)}
.nv-motion .orbit-chapter.is-live .orbit-steps li.is-active .orbit-n{color:var(--accent-text)}
.orbit-visual{position:relative;width:100%;max-width:580px;aspect-ratio:1;justify-self:end}
.orbit-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit-ring{fill:none;stroke:var(--ink);stroke-width:1.2}
.orbit-ring-inner{stroke:var(--line-2);stroke-dasharray:2 9}
.orbit-pointer{fill:var(--accent)}
.orbit-node circle{fill:var(--bg);stroke:var(--ink);stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:fill .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.orbit-node.is-active circle{fill:var(--accent);transform:scale(1.65)}
.orbit-node text{font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:.05em;fill:var(--ink-3)}
.orbit-node.is-active text{fill:var(--ink)}
.orbit-spark{fill:var(--ink)}
.orbit-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:20%;text-align:center}
.orbit-count{font-size:10px;font-weight:600;letter-spacing:.08em}
.orbit-center strong{font-family:var(--display);font-weight:400;font-size:clamp(42px,5vw,86px);line-height:1.14;letter-spacing:-.01em;text-transform:uppercase}
.orbit-center em{font-style:normal;font-size:16px;line-height:1.35;color:var(--ink-2);max-width:20ch}
.orbit-center.is-swap strong,.orbit-center.is-swap em{animation:nv-swap .5s cubic-bezier(.2,.7,.2,1) both}
.orbit-center.is-swap em{animation-delay:.06s}
.nv-motion .orbit-chapter.is-pinned .orbit-sticky{position:sticky;top:var(--hh);height:calc(100svh - var(--hh));min-height:560px;display:flex;align-items:center;padding-block:28px}
.nv-motion .orbit-chapter.is-pinned .orbit-layout{width:min(100% - 2 * var(--gutter),var(--container))}
/* Short desktop windows: a smaller heading and tighter steps so the pinned chapter still fits under the header. */
@media(min-width:1001px) and (max-height:820px){.nv-motion .orbit-chapter.is-pinned .orbit-copy h2{font-size:clamp(52px,min(7.4vw,11svh),122px);margin:18px 0 24px}.nv-motion .orbit-chapter.is-pinned .orbit-steps li{padding:12px 0}}
@media(max-width:1000px){.orbit-steps li{grid-template-columns:34px minmax(0,1fr)}.orbit-steps li>span:last-child{grid-column:2}.orbit-copy h2{font-size:9vw}}
@media(max-width:650px){
  .orbit-layout{grid-template-columns:1fr;gap:0}
  .orbit-copy{display:contents}
  .orbit-copy .chapter-label{order:1}
  .orbit-copy h2{order:2;font-size:clamp(46px,14vw,66px);margin:16px 0 22px}
  .orbit-visual{order:3;justify-self:center;width:min(78vw,38svh);max-width:none;margin-bottom:22px}
  .orbit-steps{order:4}
  .orbit-center{padding:18%;gap:6px}
  .orbit-center strong{font-size:clamp(30px,9vw,44px)}
  .orbit-center em{font-size:13px}
  .orbit-node text{font-size:20px}
  .nv-motion .orbit-chapter.is-pinned .orbit-sticky{min-height:0;align-items:flex-start;padding-block:20px}
  .nv-motion .orbit-chapter.is-pinned .orbit-steps li:not(.is-active){display:none}
  .nv-motion .orbit-chapter.is-pinned .orbit-steps li.is-active{padding-left:0}
}

/* Project artboards open like a window as they scroll in; the phone settles into place. */
.nv-motion [data-reveal]{clip-path:inset(calc((1 - var(--reveal,1)) * 12%) calc((1 - var(--reveal,1)) * 6%))}
.nv-motion [data-reveal] .case-phone{translate:0 calc((1 - var(--reveal,1)) * 110px);rotate:calc((1 - var(--reveal,1)) * 10deg)}
.nv-motion [data-reveal] .case-word{translate:calc((1 - var(--reveal,1)) * -70px) 0}
/* The phone leans toward the mouse (set by motion.js as --rx/--ry on the artboard). */
.nv-motion [data-reveal] .case-phone{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(9deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}

/* Logo wall: one tile lights up at a time (and on hover). */
.partner-wall>a{transition:background .35s}
.partner-wall img{transition:transform .3s,filter .35s}
.partner-wall>a.is-lit,.partner-wall>a:hover{background:var(--accent)}
.partner-wall>a.is-lit img,.partner-wall>a:hover img{filter:brightness(0);transform:scale(1.06)}

.partners-all{margin-top:30px}

/* Cursor companion (mouse only). */
.nv-cursor{position:fixed;left:0;top:0;z-index:70;display:grid;place-items:center;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1.5px var(--ink);pointer-events:none;opacity:0;transition:width .3s cubic-bezier(.2,.7,.2,1),height .3s cubic-bezier(.2,.7,.2,1),margin .3s cubic-bezier(.2,.7,.2,1),background .3s,opacity .3s;will-change:transform}
.nv-cursor.is-on{opacity:1}
.nv-cursor.is-link{width:40px;height:40px;margin:-20px 0 0 -20px;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.nv-cursor.is-view{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--accent)}
.nv-cursor span{font-size:10px;font-weight:600;letter-spacing:.07em;color:var(--ink);opacity:0;transition:opacity .2s}
.nv-cursor.is-view span{opacity:1}

/* First screen: the headline rises in, the marker draws under the second line. */
@media(prefers-reduced-motion:no-preference){
  .is-home .hero-meta{animation:nv-rise .8s .05s cubic-bezier(.2,.7,.2,1) both}
  /* Lines rise out of a mask; the mask is open above (İ dots) and a little below (Ş, Ğ). */
  .is-home .hero-type-line{clip-path:inset(-.45em -.25em -.14em -.25em)}
  .is-home .hl-in{display:inline-block;animation:nv-mask-rise 1.05s cubic-bezier(.2,.75,.15,1) both}
  .is-home .hero-type-line:first-child .hl-in{animation-delay:.1s}
  .is-home .hero-type-line:last-child .hl-in{animation-delay:.24s}
  .is-home .hero-type-line:last-child:after{transform-origin:left center;animation:nv-draw .7s .78s cubic-bezier(.3,.7,.2,1) both}
  .is-home .hero-margin-note{animation:nv-rise .8s .6s cubic-bezier(.2,.7,.2,1) both}
  .is-home .hero-bottom{animation:nv-rise .8s .75s cubic-bezier(.2,.7,.2,1) both}
}
@media(prefers-reduced-motion:reduce){.hero-clock:before{animation:none}.nv-cursor{display:none}}
@media(hover:none),(pointer:coarse){.nv-cursor{display:none}}
@keyframes nv-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes nv-mask-rise{from{transform:translateY(112%)}to{transform:none}}
@keyframes nv-draw{from{scale:0 1}to{scale:1 1}}
@keyframes nv-blink{50%{opacity:.15}}
@keyframes nv-swap{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}

/* Product page: link line to the product's own site and trial. */
.product-site-line{margin-top:2em;padding-top:1.1em;border-top:1px solid var(--line);font-size:16px}
.product-site-line a{text-decoration:underline;text-underline-offset:4px;font-weight:600}