/* One in-page introduction: cards never travel between two layouts. */
.hero-card-display{display:none}
@media(min-width:1001px){
 .hero-card-display{display:block;position:relative;--card-size:min(9vw,17.25vh,168px);height:calc(var(--card-size) * 1.24);margin:0 auto 28px;pointer-events:none}
 .intro-deck{position:absolute;left:50%;top:50%;width:var(--card-size);height:var(--card-size);transform:translate(-50%,-50%);opacity:1}
 .intro-card{position:absolute;inset:0;border-radius:7px;box-shadow:0 12px 36px #0003;transform:translate(var(--x),0) rotate(var(--r));overflow:hidden}
 .intro-canvas{position:absolute;width:448px;height:448px;overflow:hidden;transform-origin:top left;scale:calc(var(--card-size) / 448px);font-family:Arial,sans-serif}
 .intro-canvas *{box-sizing:border-box}
 .intro-vision{background:#51483c}.intro-hulu{background:linear-gradient(45deg,#171f27,#2a373e)}.intro-cnn{background:#794f5a}.intro-nbcu{background:#f7e9c9}
 .intro-card:nth-child(1){--x:calc(-88% - 6px);--r:-14deg;z-index:4}
 .intro-card:nth-child(2){--x:0%;--r:5deg;z-index:3}
 .intro-card:nth-child(3){--x:calc(88% + 6px);--r:-13deg;z-index:2}
 .intro-card:nth-child(4){--x:132%;--r:9deg;z-index:1}
 .home-page .hero:has(.hero-card-display){padding-top:12px;gap:16px}
 .home-page .hero:has(.hero-card-display) .hero-work-guide{flex-basis:16px;min-height:16px}
 .home-page .hero-card-display{animation:hero-soft-arrival .85s ease-out both}
}
@keyframes hero-soft-arrival{from{opacity:0}to{opacity:1}}
@media(min-width:1001px) and (max-height:800px){
 .hero-card-display{--card-size:min(9vw,9.75vh,168px)}
}
@media(prefers-reduced-motion:reduce){
 .home-page .hero-card-display{animation:none}
 .intro-deck{transition:none}
}
/* Reveal the stack in place, one layer at a time. */
@media(min-width:1001px){
 .hero-card-display .intro-card{opacity:0;transition:opacity 1.2s ease;transition-delay:var(--reveal-delay)}
 .hero-card-display .intro-card:nth-child(1){--reveal-delay:0ms}
 .hero-card-display .intro-card:nth-child(2){--reveal-delay:220ms}
 .hero-card-display .intro-card:nth-child(3){--reveal-delay:440ms}
 .hero-card-display .intro-card:nth-child(4){--reveal-delay:660ms}
 .hero-card-display.is-ready .intro-card{opacity:1}
}
@media(prefers-reduced-motion:reduce){
 .hero-card-display .intro-card{opacity:1;transition:none}
}

/* Lay out the Vision Pro detail at its display size to avoid scaled-layer softness. */
@media(min-width:1001px){.intro-canvas.intro-vision{scale:none;zoom:calc(var(--card-size) / 448px)}}

/* A soft 12px rise and focus reveal, following the reference entrance. */
@media(min-width:1001px) and (prefers-reduced-motion:no-preference){
 .intro-sequence .hero-location,.intro-sequence .hero h1,.intro-sequence .hero-tags{
  opacity:0;visibility:hidden;transform:translateY(12px);filter:blur(1px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1),visibility 0s;
  transition-delay:var(--arrival-delay);
 }
 .intro-sequence .hero-location{--arrival-delay:1.64s}
 .intro-sequence .hero h1{--arrival-delay:1.78s}
 .intro-sequence .hero-tags{--arrival-delay:2s}
 .intro-sequence-ready .hero-location,.intro-sequence-ready .hero h1,.intro-sequence-ready .hero-tags{opacity:1;visibility:visible;transform:translateY(0);filter:blur(0)}
 .intro-sequence main>section:not(.hero),.intro-sequence body>footer{visibility:hidden;transition:visibility 0s 1.64s}
 .intro-sequence-ready main>section:not(.hero),.intro-sequence-ready body>footer{visibility:visible}
 .intro-sequence .hero-work-guide{visibility:hidden;transition:visibility 0s 2.85s}
 .intro-sequence-ready .hero-work-guide{visibility:visible}
 .intro-sequence .hero-work-guide::before{animation:none;transform:scaleY(0);transition:transform 1.2s cubic-bezier(.22,1,.36,1) 2.85s}
 .intro-sequence-ready .hero-work-guide::before{transform:scaleY(1)}
 .intro-complete .hero-work-guide::before{animation:none;transform:scaleY(1)}
}

/* Restored scroll positions and anchor entries show the page immediately. */
.intro-skip .hero-card-display{animation:none}
.intro-skip .hero-card-display .intro-card{opacity:1;transition:none}
.intro-skip .hero-work-guide::before{animation:none;transform:scaleY(1);transition:none}