/* Halo 2.0 sections (index.html): the full-width local nav, desktop scenes with the real island, the highlights
   gallery, the Notifications / Dictation / Buddy chapters and the "All new" list. Loaded after apple.css. */
:root{--ease-apple:cubic-bezier(.28,.11,.32,1)}
html{scroll-behavior:smooth;scroll-padding-top:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* local nav: apple.com's full-width frosted bar with a hairline, not a floating card */
.ln{top:0;margin:0;max-width:none;width:100%;border-radius:0;background:rgba(251,251,253,.8);box-shadow:none;border-bottom:1px solid rgba(0,0,0,.12)}
.ln-in{max-width:var(--wrap);margin:0 auto;height:52px;padding:0 22px}
.ln-title{font-size:21px}
.ln-link{border:0;padding:0;font-size:12px}
.ln .pill.sm{padding:4px 11px}

/* gradient type in macOS 27's Golden Gate colours: gold into indigo */
.grad,.stat-t .num{background:linear-gradient(100deg,#f4dcae 0%,#d6ae73 34%,#ab9fcd 68%,#7f84cc 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.grad-b{background:linear-gradient(100deg,#9c7132 0%,#7a6aa8 62%,#4f5ba9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* a desktop: the Golden Gate wallpaper, a menu bar, and the real island hanging from the top.
   --pt is how many points of screen the desk shows across, so the menu bar matches the notch's height. */
.desk{--pt:900;position:relative;container-type:inline-size;overflow:hidden;aspect-ratio:2.2/1;border-radius:28px;
  background:#cdb89a url(../media/wallpaper.webp) 50% 0/cover no-repeat}
.desk::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(32 * 100cqw / var(--pt));
  background:rgba(255,255,255,.2);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5)}
.desk .isl{position:absolute;top:0;left:50%;width:var(--w);height:auto;border-radius:0;transform:translateX(-50%);
  filter:drop-shadow(0 18px 30px rgba(20,14,40,.28))}
.desk-mac{--pt:1512;aspect-ratio:1512/982;border-radius:12px 12px 0 0}
.desk-lg{--pt:1200;aspect-ratio:2.4/1;margin-top:70px;box-shadow:0 40px 100px -40px rgba(0,0,0,.6)}
.ch-light .desk-lg{box-shadow:0 40px 100px -40px rgba(60,40,20,.45)}

/* highlights: one card per feature; the one in the middle is full size, its dot fills while it plays */
.gal{background:#fff;padding:110px 0 120px;overflow:hidden}
.gal-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;max-width:min(1000px,86vw);padding:0}
.gal-head .more{font-size:17px}
.gal-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  padding:0 max(22px,calc((100vw - min(1000px,86vw)) / 2))}
.gal-track::-webkit-scrollbar{display:none}
.gal-card{position:relative;flex:0 0 min(1000px,86vw);aspect-ratio:16/9;border-radius:28px;overflow:hidden;scroll-snap-align:center;background:#000;
  transform:scale(.94);opacity:.5;transition:transform .9s var(--ease-apple),opacity .9s var(--ease-apple)}
.gal-card.on{transform:none;opacity:1}
.gal-card .desk{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.gal-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.gal-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:90px 44px 36px;font-size:clamp(17px,1.7vw,24px);line-height:1.3;font-weight:600;
  letter-spacing:.004em;color:rgba(29,29,31,.62);background:linear-gradient(180deg,rgba(255,255,255,0),rgba(250,248,244,.82) 58%)}
.gal-cap b{color:#1d1d1f;font-weight:600}
.gal-ctl{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:30px}
.gal-dots{display:flex;align-items:center;gap:10px;height:56px;padding:0 22px;border-radius:999px;background:rgba(232,232,237,.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.gal-dots button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;overflow:hidden;background:rgba(0,0,0,.42);cursor:pointer;
  transition:width .55s var(--ease-apple),background .3s}
.gal-dots button[aria-current="true"]{width:44px;background:rgba(0,0,0,.18)}
.gal-dots button[aria-current="true"]::after{content:"";position:absolute;inset:0;transform-origin:left;background:#1d1d1f;animation:galfill var(--dur,5s) linear forwards}
.gal.paused .gal-dots button::after{animation-play-state:paused}
@keyframes galfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gal-play{width:56px;height:56px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(232,232,237,.72);color:#1d1d1f;cursor:pointer;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:background .2s,transform .3s var(--ease-apple)}
.gal-play:hover{background:#dcdce1}
.gal-play:active{transform:scale(.92)}
.gal-play i{display:block;width:16px;height:16px}
@media (max-width:640px){.gal-cap{padding:60px 22px 22px}}

/* chapters */
.ch{padding:150px 0 140px}
.ch-dark{background:#000;color:#f5f5f7}
.ch-dark .eyebrow,.ch-dark .body{color:#86868b}
.ch-light{background:var(--bg-2)}
.pts{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:80px}
.pts i{display:block;width:34px;height:34px;margin-bottom:16px;color:#d6ae73}
.pts h3{margin:0;font-size:21px;line-height:1.2}
.pts p{margin:8px 0 0;font-size:17px;color:#86868b}
@media (max-width:760px){.pts{grid-template-columns:1fr;gap:30px}}

/* dictation: a Notes window on the desk, typing what Buddy hears */
.note-win{position:absolute;left:50%;top:27%;width:min(580px,58%);transform:translateX(-50%);border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.86);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);
  box-shadow:0 30px 70px -20px rgba(40,30,20,.45),0 0 0 1px rgba(0,0,0,.06)}
.nw-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.06);font-size:13px;font-weight:600;color:#6e6e73}
.nw-bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.nw-bar i:nth-child(2){background:#febc2e}
.nw-bar i:nth-child(3){background:#28c840}
.nw-bar span{margin:0 auto;transform:translateX(-24px)}
.nw-text{margin:0;min-height:4.4em;padding:22px 24px 26px;font-size:clamp(14px,1.6vw,22px);line-height:1.45;color:#1d1d1f}
.nw-text .paste{animation:paste .5s var(--ease-apple) both}
@keyframes paste{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
.desk .dict-listen,.desk .dict-done{transition:opacity .45s var(--ease-apple)}
.desk .dict-done,.desk.done .dict-listen{opacity:0}
.desk.done .dict-done{opacity:1}
@keyframes wordin{from{opacity:0;transform:translateY(6px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-.15em;background:#0071e3;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.langs{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:64px auto 18px;padding:0}
.langs li{padding:9px 18px;border-radius:999px;background:#fff;font-size:15px;font-weight:500;box-shadow:0 0 0 1px rgba(0,0,0,.06);
  transition:transform .4s var(--ease-apple),box-shadow .4s}
.langs li:hover{transform:translateY(-3px);box-shadow:0 10px 24px -10px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.06)}

/* Buddy: a live face, eyes on your cursor */
.bud{display:block;width:clamp(150px,18vw,220px);aspect-ratio:1;margin:0 auto 44px;padding:0;border:0;border-radius:28%;background:#0b0b0e;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 120px -20px rgba(127,132,204,.5);transition:transform .6s var(--ease-apple)}
.bud:hover{transform:scale(1.05)}
.bud svg{display:block;width:100%;height:100%}
.bud rect{fill:#fff}
.bud path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}
.bud-blush{fill:#ff7a8f;opacity:.22;filter:blur(3px);transition:opacity .4s}
#budLook{transition:transform .35s var(--ease-apple)}
#budEyes{transform-box:fill-box;transform-origin:center;transition:transform .09s ease}
.bud.blink #budEyes,.bud.sleepy #budEyes{transform:scaleY(.12)}
.bud-open,.bud-happy{transition:opacity .25s}
.bud-happy{opacity:0}
.bud.happy .bud-happy{opacity:1}
.bud.happy .bud-open{opacity:0}
.bud.happy .bud-blush{opacity:.6}
.bud-mouth{transition:d .4s var(--ease-apple)}
.bud.happy .bud-mouth{d:path("M37 64 Q50 79 63 64")}
.moods{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:84px;padding:0 22px}
.moods li{text-align:center}
.moods img{display:block;width:100%;height:auto;transition:transform .6s var(--ease-apple)}
.moods li:hover img{transform:translateY(-8px) scale(1.03)}
.moods span{display:block;margin-top:12px;font-size:17px;font-weight:600;color:#f5f5f7}
@media (max-width:760px){.moods{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* all new in 2.0 */
.allnew{padding:130px 0 140px;background:#fff}
.an-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 48px}
.an-grid i{display:block;width:30px;height:30px;margin-bottom:14px;color:#1d1d1f}
.an-grid h3{margin:0;font-size:19px;line-height:1.25}
.an-grid p{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--ink-2)}
@media (max-width:900px){.an-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.an-grid{grid-template-columns:1fr}}

/* phones: taller cards and scenes, so the island and the caption both have room */
.gal-head .more{white-space:nowrap}
@media (max-width:640px){
  .gal-card{aspect-ratio:4/5}
  .desk-lg{aspect-ratio:4/3;margin-top:44px}
  .note-win{top:24%;width:84%}
  .ch{padding:100px 0 90px}
  /* a closer crop: the island 1.7x larger, the menu bar with it */
  .desk:not(.desk-mac){--pt:530}
  .desk-lg{--pt:706}
  .desk:not(.desk-mac) .isl{width:min(96%,calc(var(--w) * 1.7))}
}

/* closer look: each view is a desk with the real island; the "day" view leans on the island's right side */
.ex-view>.desk{position:absolute;aspect-ratio:auto;border-radius:0} /* .desk is relative; here the views stack */
.ex-view>.desk[data-ex="day"] .isl{left:22%}
.wn-cards .desk{aspect-ratio:2/1;border-radius:0}

/* closer look: a drawn plus that rotates into an ×, centred exactly (a "+" glyph sits off-centre in the font) */
.ex-pills button i{position:relative;font-size:0}
.ex-pills button i::before,.ex-pills button i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%)}
.ex-pills button i::after{transform:translate(-50%,-50%) rotate(90deg)}