/* The opening: soft-body letters over an aurora of brand blues (see hero.js). */
.hero-aurora{position:absolute;inset:0;z-index:-2;background:#107BFF;overflow:hidden}
.hero-aurora canvas{display:block;width:100%;height:100%}
/* grain over the aurora and the letters alike, as in the study; the studio and captions stay clean */
.hero-grain{position:absolute;inset:-80px;z-index:4;pointer-events:none;opacity:.42;mix-blend-mode:overlay;background-size:192px 192px;will-change:transform}
.hero-type{position:absolute;inset:0;z-index:3;pointer-events:none;color:var(--paper)}
.hg{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform;visibility:hidden}
.hero-ready .hg.on{visibility:visible}
.hg canvas,.hero-mac canvas{position:absolute;display:block}
.hg-behind{z-index:-1}
.hero-mac{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;visibility:hidden}
/* the nav wordmark wears the real logo too */
.wordmark{display:inline-flex;align-items:baseline}
.wordmark .wm-o{height:.796em;width:.616em;margin:0 -.01em 0 .05em;fill:currentColor;transform:translateY(.006em)}
/* the studio sits on the aurora now; the old atmosphere and sculpture are gone */
.journey-footer{z-index:8}
.studio-reveal{transform-origin:50% 70%;will-change:transform,opacity}
.motion-paused .hero-grain{opacity:.3}
@media (prefers-reduced-motion:reduce){
  .hero-type{position:absolute}
  .hero-grain{display:none}
}
/* the real headline: visible until the letters take over (and for anyone without JS) */
.hero-title{position:absolute;left:0;right:0;top:34%;margin:0;padding:0 6%;text-align:center;font:clamp(64px,9vw,150px)/1.05 NotSmooth;letter-spacing:-.035em;color:var(--paper)}
.hero-ready .hero-title{top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── one screen: the edit and the iPad together (around, the main opening; ?opening=inside) ── */
@media (prefers-reduced-motion:no-preference){
  /* the edit takes about 4.4 screens of scrolling, then a short rest */
  .journey-ready.opening-inside .hero-scroll{height:620svh}
  .journey-ready.opening-around .hero-scroll{height:680svh}
  /* around, playing by itself: the scroll only hands over to the iPad */
  .journey-ready.opening-around.opening-auto .hero-scroll{height:250svh}
  .opening-inside .studio-reveal,.opening-around .studio-reveal{transform:none;opacity:1}
  /* inside: the iPad fills the screen and the sentence lands on its page */
  .opening-inside .opening{z-index:6}
  .opening-inside .studio-title,.opening-inside .studio-caption{display:none}
  .opening-inside .tablet{width:min(100%,calc((100svh - 210px)*4/3))}
  /* around: the iPad's title and buttons arrive as it rises */
  .opening-around .studio-title,.opening-around .studio-caption{opacity:var(--rise,0)}
}
@media (prefers-reduced-motion:no-preference) and (max-width:700px){
  /* on a phone the iPad stands upright, so the sentence has room */
  .opening-inside .tablet{aspect-ratio:3/4;width:min(100%,calc((100svh - 250px)*3/4))}
  .opening-inside .camera{left:calc(50% - 2px);top:-6px}
}
/* the switcher for comparing the openings */
.open-pick{position:fixed;left:50%;top:clamp(16px,2.4vw,30px);z-index:61;display:flex;align-items:center;gap:2px;height:44px;padding:4px;border-radius:999px;background:rgba(17,17,17,.84);color:var(--paper);box-shadow:0 14px 34px -16px rgba(3,18,70,.7);font-size:13px;font-weight:750;white-space:nowrap;translate:-50% 0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.open-pick-label{padding:0 10px 0 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.open-pick .s{display:none}
.open-pick a{padding:9px 13px;border-radius:999px}
.open-pick a:hover{background:rgba(244,242,235,.12)}
.open-pick a[aria-current=page]{background:var(--paper);color:var(--ink)}
@media (max-width:700px){
  .open-pick{top:76px;font-size:12px}
  .open-pick-label,.open-pick .l{display:none}
  .open-pick .s{display:inline}
  .open-pick a{padding:9px 10px}
}

/* ── phones: their own opening (opening-phone.js) ──
   No aurora: one blue lit from the top left, with still grain behind everything.
   The page scrolls normally; the sentence corrects itself once, the iPad stands upright below it. */
.journey-ready.opening-phone .hero-scroll{height:auto;background:linear-gradient(164deg,#3b90ff 0%,#1669e8 34%,#0e52c9 70%,#0a3d9f 100%)}
.opening-phone .hero{position:relative;height:auto;min-height:0;overflow:hidden}
.opening-phone .hero::before{content:'';position:absolute;inset:0;z-index:-1;background:url('/assets/grain.svg');opacity:.12;mix-blend-mode:soft-light;pointer-events:none}
.opening-phone .hero-aurora,.opening-phone .hero-grain,.opening-phone .hero-type,.opening-phone .journey-footer{display:none}
.opening-phone .opening{position:relative;inset:auto;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:calc(100svh - 150px);padding:104px 4% 28px}
.opening-phone .hero-title{position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.phone-title{position:relative;width:100%;min-width:0;text-align:center;font:var(--fs,64px)/1.04 NotSmooth;letter-spacing:-.035em;color:var(--paper)}
.pw{display:inline-block;text-shadow:0 .05em 0 #cfc7b3,0 .14em .2em rgba(3,22,92,.45)}
.pw-new{color:var(--ink);text-shadow:0 .05em 0 #000,0 .14em .2em rgba(3,22,92,.4)}
.pw-o{display:inline-block;line-height:0}
.pw-o svg{display:inline-block;height:.796em;width:.616em;margin:0 -.01em 0 .05em;fill:currentColor;overflow:visible;filter:drop-shadow(0 .05em 0 #000) drop-shadow(0 .14em .2em rgba(3,22,92,.4))}
.pw-mac{transform-box:fill-box;transform-origin:50% 50%}
.pw-cut{position:relative}
.pw-strike{position:absolute;left:.02em;right:-.1em;top:.67em;height:.1em;border-radius:.05em;background:var(--ink);transform:rotate(-7deg) scaleX(0);transform-origin:0 50%}
.phone-title.is-a .pw-new,.phone-title.is-a .br-b,.phone-title.is-b .br-a,.phone-title.is-b:not(.is-playing) .pw-cut{display:none}
.phone-title.is-b .pw-cut{position:absolute;margin:0}
/* the iPad, upright, peeking in at the bottom of the first screen */
.opening-phone .studio-reveal{position:relative;inset:auto;z-index:1;transform:none;opacity:1;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 4% 64px}
.opening-phone .studio-title,.opening-phone .studio-caption{width:100%;max-width:440px;opacity:1}
.opening-phone .studio-title h2{font-size:min(30px,8.2vw);margin:0;white-space:nowrap}
.opening-phone .tablet{width:100%;max-width:440px;aspect-ratio:3/4;height:auto;min-height:0;max-height:none;border-width:8px;border-radius:30px}
.opening-phone .camera{left:calc(50% - 2px);top:-6px}
.opening-phone .app-page{inset:0}
.opening-phone .canvas-hint{display:none}
/* it takes ink only once you ask: until then a finger on it scrolls the page */
.opening-phone .app-surface:not(.is-writing) #ink-canvas{pointer-events:none}
.draw-start,.draw-done{display:none}
.opening-phone .draw-start{display:block;position:absolute;inset:0;z-index:2;padding:0;background:none;border-radius:0;cursor:pointer}
.opening-phone .draw-start span,.opening-phone .draw-done{position:absolute;left:50%;bottom:20px;translate:-50% 0;padding:11px 20px;border-radius:999px;font-size:14px;font-weight:750;line-height:1.2;white-space:nowrap}
.opening-phone .draw-start span{background:var(--ink);color:var(--paper)}
.opening-phone .draw-done{display:block;z-index:5;background:var(--blue);color:var(--white)}
/* the y's balloon pop (hero-scrub.js): rubber shreds, a ring of bang lines and a word */
.hero-pop{position:absolute;left:0;top:0;width:0;height:0;z-index:4;pointer-events:none}
.hero-pop i{position:absolute;left:0;top:0;translate:-50% -50%;background:#111}
.hero-pop b{position:absolute;left:0;top:-2.5px;width:calc(var(--S) * .34);height:5px;border-radius:3px;background:var(--paper);transform-origin:0 50%}
.hero-pop span{position:absolute;left:0;top:0;translate:-50% -50%;font:calc(var(--S) * .32)/1 NotSmooth;color:var(--paper);white-space:nowrap}
/* no iPad in the opening (main.js, <html data-studio="end"> or "off"): the sentence keeps
   the first screen and the page moves on sooner */
:is([data-studio=off],[data-studio=end]) .studio-reveal,[data-studio=off] .skip-link{display:none}
:is([data-studio=off],[data-studio=end]) #journey-caption{visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  :is([data-studio=off],[data-studio=end]).journey-ready.opening-around.opening-auto .hero-scroll{height:112svh}
}
/* the iPad at the end (data-studio="end"): its own blue section before the footer, the
   opening's colours, the same title, iPad and buttons */
.try-section{display:none}
[data-studio=end] .try-section{display:block;padding:96px 7% 84px;background:radial-gradient(60% 70% at 0 100%,#041c78cc,transparent 70%),radial-gradient(50% 60% at 100% 62%,#5b3cff99,transparent 70%),radial-gradient(45% 55% at 88% 0,#63b8ff99,transparent 70%),#107bff}
.studio-end{display:flex;flex-direction:column;align-items:center;gap:16px}
.studio-end .studio-title,.studio-end .studio-caption{opacity:1} /* in the opening they fade in as the iPad rises */
.studio-end .studio-title,.studio-end .studio-caption{width:min(100%,calc((100svh - 240px) * 4 / 3))}
.studio-end .studio-title h2{font-size:clamp(34px,4vw,60px)}
@media (max-width:700px){
  [data-studio=end] .try-section{padding:64px 4% 56px}
  .studio-end .studio-title,.studio-end .studio-caption{width:100%;max-width:440px}
  .studio-end .studio-title h2{font-size:min(32px,7.6vw);white-space:normal}
}