@font-face{font-family:ModdyDecorative;src:url('cinzel-decorative-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap;}
/* All moving watch layers share one coordinate system and one pivot. */
.page{background:#020202;min-height:100svh;}
.masthead{padding:22px 24px 0;}
h1.title-art{max-width:650px;width: min(76vw,650px);line-height:0;}
.title-art img{width:100%;height:auto;display:block;}
.eyebrow{font-size:.75rem;letter-spacing:.22em;margin:8px 0 0;color:#b69a60;}
.stage{height:min(68vw,700px);min-height:550px;padding:0;display:block;}
.hero-art,.page.is-open .hero-art{background-size:100% 100%;background-position:center;inset:0;transform:none;filter:brightness(.62) saturate(.55);}
.hero-art.ready{opacity:1;}
.page.is-open .hero-art{filter:brightness(.38) saturate(.5);transition:filter 1s;}
.stage::before{background:linear-gradient(#020202,transparent 18%,transparent 70%,#020202),linear-gradient(90deg,#020202,transparent 20%,transparent 80%,#020202);}
.watch-wrap,.page.is-open .watch-wrap{position:absolute;left:50%;top:60%;width:240px;min-width:0;aspect-ratio:1;display:block;margin:0;transform:translate(-50%,-50%);animation:gentle-swing 5s ease-in-out infinite;transform-origin:50% -20%;z-index:4;perspective:1100px;}
.page.is-open .watch-wrap{animation-play-state:paused;}
.chain{display:none;}
.watch,.watch:hover,.page.is-open .watch{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;box-shadow:none;transform:none;overflow:visible;border-radius:50%;perspective:1100px;transform-style:preserve-3d;}
.watch::before,.watch::after{display:none;}
.sprite{position:absolute;inset:0;display:block;background-image:url('watch-parts-v2.png');background-size:200% 200%;background-repeat:no-repeat;}
.watch-body{background-position:100% 0;filter:drop-shadow(0 0 15px #9b53c877);}
.lid{position:absolute;inset:0;display:block;transform-origin:10% 50%;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform 1.35s cubic-bezier(.23,.65,.2,1);}
.lid-front{background-position:0 0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(2px);}
.lid-back{background-position:0 100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg) translateZ(1px);}
.page.is-open .lid{transform:rotateY(-150deg);}
.magic-light{position:absolute;inset:15%;border-radius:50%;background:radial-gradient(circle,#fff9, #d996ff44 22%,#55eee922 48%,transparent 70%);opacity:0;box-shadow:0 0 65px 25px #bd69fa66;transition:opacity .8s .3s;pointer-events:none;}
.page.is-open .magic-light{opacity:1;animation:pulse 3s infinite;}
.tap-hint{bottom:-40px;font-size:.85rem;letter-spacing:.16em;transition:opacity .3s;width:260px;text-align:center;}
.menu,.page.is-open .menu{position:absolute;inset:60% auto auto 50%;width:0;height:0;display:block;opacity:1;transform:none;z-index:6;pointer-events:none;}
.menu::before{display:none;}
.menu button{position:absolute;left:0;top:0;width:205px;min-height:64px;border-radius:50%;border:1px solid #b1904b;background:radial-gradient(ellipse,#251a12f5,#080706f5);box-shadow:inset 0 0 0 4px #090705,inset 0 0 0 5px #a7803544,0 0 22px #d788ff22;padding:15px;font-size:1.1rem;letter-spacing:.02em;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.12);transition:transform 1s cubic-bezier(.2,.85,.25,1.12),opacity .6s,visibility .6s;pointer-events:none;}
.menu button:nth-child(1){--x:-235px;--y:-55px;transition-delay:.65s;}
.menu button:nth-child(2){--x:0px;--y:175px;transition-delay:.8s;}
.menu button:nth-child(3){--x:235px;--y:-55px;transition-delay:.95s;}
.page.is-open .menu button{opacity:1;visibility:visible;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1);pointer-events:auto;}
.menu button:hover,.menu button:focus-visible{color:#fff3d3;background:#322215;outline:2px solid #f6cc74;outline-offset:5px;}
.footer{font-size:.9rem;letter-spacing:.04em;padding-top:18px;}
@keyframes gentle-swing{0%,100%{transform:translate(-50%,-50%) rotate(-2deg);}50%{transform:translate(-50%,-50%) rotate(2deg);}}
@media(max-width:760px){
 .stage{height:600px;min-height:600px;}
 .hero-art,.page.is-open .hero-art{left:calc(50% - 450px);width:900px;right:auto;background-size:100% 100%;}
 .watch-wrap,.page.is-open .watch-wrap{width:190px;top:58%;}
 .menu,.page.is-open .menu{top:58%;}
 .menu button{width:150px;font-size:1rem;min-height:57px;}
 .menu button:nth-child(1){--x:-105px;--y:120px;}
 .menu button:nth-child(2){--x:0px;--y:200px;}
 .menu button:nth-child(3){--x:105px;--y:120px;}
 h1.title-art{width:90vw;}
 .eyebrow{font-size:.75rem;letter-spacing:.1em;}
 .page.is-open .lid{transform:rotateY(-125deg);}
}
/* Place the crown at the actual end of the illustrated chain. */
.stage{width:100%;max-width:1100px;height:710px;margin:0 auto;}
.hero-art,.page.is-open .hero-art{height:580px;}
.watch-wrap,.page.is-open .watch-wrap{left:51.04%;top:460px;transform-origin:50% 3%;}
.menu,.page.is-open .menu{left:51.04%;top:460px;}
.watch-body{clip-path:inset(0 0 6% 0);}
.lid{transform-origin:50% 3%;}
.lid-back{transform:rotateX(180deg) translateZ(1px);background-position:0 100%;}
.page.is-open .lid{transform:rotateX(150deg);}
@media(max-width:760px){
 .stage{height:730px;min-height:730px;}
 .hero-art,.page.is-open .hero-art{left:calc(50% - 370px);width:740px;height:600px;}
 .watch-wrap,.page.is-open .watch-wrap{left:calc(50% + 7.7px);top:449px;}
 .menu,.page.is-open .menu{left:50%;top:449px;}
 .page.is-open .lid{transform:rotateX(150deg);}
}
.menu button{font-family:ModdyDecorative,Georgia,serif;color:#f1d28c;font-size:1rem;text-shadow:0 1px 0 #694416,0 0 10px #d8ae5733;}
/* Stagger only the release; all magic returns immediately on closing. */
.page:not(.is-open) .menu button{transition-delay:0s;transition-duration:.48s,.38s,.48s;transition-timing-function:cubic-bezier(.5,0,.8,.5),ease,linear;}
.page:not(.is-open) .magic-light{transition-delay:0s;transition-duration:.35s;}
.stage-slot{position:relative;min-width:0;isolation:isolate;}
/* The unified lithograph artwork contains the magician and the entire Wish Factory. */
.stage::before{background:none;}
.hero-art,.page.is-open .hero-art{-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 7%,#000 91%,transparent);filter:brightness(.72) saturate(.72) contrast(1.06);}
.page.is-open .hero-art{filter:brightness(.48) saturate(.62) contrast(1.08);}
@media(min-width:761px) and (min-height:500px){
 .page{height:100svh;height:100dvh;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;}
 .masthead{padding-top:14px;}
 h1.title-art{width:min(60vw,57vh,600px);}
 .eyebrow{margin-top:2px;}
 .stage-slot{min-height:0;}
 .stage{position:absolute;left:50%;top:50%;width:1100px;max-width:none;height:710px;min-height:710px;margin:0;transform:translate(-50%,-50%) scale(var(--scene-scale, .6));transform-origin:center;}
 .menu button{font-size:clamp(1rem,calc(1rem / var(--scene-scale,1)),1.6rem);line-height:1.2;min-height:76px;padding:12px 8px;}
 .tap-hint{font-size:clamp(.85rem,calc(.85rem / var(--scene-scale,1)),1.25rem);width:350px;}
 .footer{padding:0 24px 16px;font-size:.875rem;}
 .footer::before{margin-bottom:3px;}
}
@media(prefers-reduced-motion:reduce){.watch-wrap,.page.is-open .watch-wrap{animation:none;}.menu button,.lid,.magic-light{transition:none!important;animation:none;}}

/* Full-screen poster composition: art fills the viewport, type floats above it. */
@media(min-width:761px) and (min-height:500px){
 .page{position:relative;display:block;width:100%;height:100svh;height:100dvh;min-height:0;overflow:hidden;}
 .masthead{position:absolute;z-index:9;top:max(14px,env(safe-area-inset-top));left:50%;width:min(72vw,720px);padding:0;transform:translateX(-50%);filter:none;pointer-events:none;}
 h1.title-art{width:100%;max-width:none;}
 .eyebrow{margin-top:-2px;color:#e2c47f;text-shadow:0 2px 7px #000,0 0 16px #000;font-size:.78rem;}
 .stage-slot{position:absolute;inset:0;min-height:0;overflow:hidden;}
 .stage{position:absolute;left:50%;top:50%;width:1100px;max-width:none;height:660px;min-height:660px;margin:0;transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center;}
 .hero-art,.page.is-open .hero-art{height:660px;background-size:100% 100%;-webkit-mask-image:none;mask-image:none;}
 .watch-wrap,.page.is-open .watch-wrap{left:51.04%;top:505px;width:290px;}
 .watch-wrap,.page.is-open .watch-wrap,.watch,.watch:hover,.page.is-open .watch{perspective:none;}
 .menu,.page.is-open .menu{left:51.04%;top:505px;}
 .menu button{font-size:clamp(1rem,calc(1rem / var(--scene-scale,1)),1.45rem);}
 .menu button:nth-child(1){--x:-255px;--y:-80px;}
 .menu button:nth-child(2){--x:0px;--y:-205px;}
 .menu button:nth-child(3){--x:255px;--y:-80px;}
 .footer{position:absolute;z-index:8;left:50%;bottom:max(11px,env(safe-area-inset-bottom));width:max-content;max-width:80vw;padding:0;transform:translateX(-50%);color:#ead8b0;text-shadow:0 2px 8px #000,0 0 18px #000;}
 .footer::before{display:none;}
}

/* Phone composition: full-screen art with independently sized, fully visible watch. */
@media(max-width:760px){
 .page{position:relative;display:block;width:100%;height:100svh;height:100dvh;min-height:0;overflow:hidden;}
 .masthead{position:absolute;z-index:9;top:max(14px,env(safe-area-inset-top));left:50%;width:92vw;padding:0;transform:translateX(-50%);filter:none;pointer-events:none;}
 h1.title-art{width:100%;max-width:none;}
 .title-art img{opacity:.96;}
 .eyebrow{margin-top:4px;color:#e4c986;font-size:clamp(.72rem,3vw,.9rem);letter-spacing:.1em;text-shadow:0 2px 7px #000,0 0 13px #000;}
 .stage-slot{position:absolute;inset:0;min-height:0;overflow:hidden;}
 .stage{position:absolute;left:50%;top:50%;width:740px;max-width:none;height:650px;min-height:650px;margin:0;transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center;}
 .hero-art,.page.is-open .hero-art{left:0;right:auto;width:740px;height:650px;background-size:100% 100%;-webkit-mask-image:none;mask-image:none;}
 .watch-wrap,.page.is-open .watch-wrap{left:51.04%;top:460px;width:210px;min-width:0;margin:0;}
 .menu,.page.is-open .menu{left:51.04%;top:460px;}
 .menu button{width:145px;min-height:56px;font-size:clamp(.86rem,calc(.86rem / var(--scene-scale,1)),1.05rem);}
 .menu button:nth-child(1){--x:-92px;--y:-78px;}
 .menu button:nth-child(2){--x:0px;--y:-185px;}
 .menu button:nth-child(3){--x:92px;--y:-78px;}
 .tap-hint{bottom:-32px;width:230px;font-size:clamp(.75rem,calc(.75rem / var(--scene-scale,1)),.9rem);}
 .footer{position:absolute;z-index:8;left:50%;bottom:max(9px,env(safe-area-inset-bottom));width:max-content;max-width:90vw;padding:0;transform:translateX(-50%);font-size:.75rem;color:#ead8b0;text-shadow:0 2px 8px #000,0 0 18px #000;}
 .footer::before{display:none;}
}

/* Portrait tablets need a tighter magical burst and a shallower lid opening. */
@media(min-width:761px) and (orientation:portrait){
 .menu button{width:175px;min-height:66px;}
 .menu button:nth-child(1){--x:-155px;--y:-72px;}
 .menu button:nth-child(2){--x:0px;--y:-185px;}
 .menu button:nth-child(3){--x:155px;--y:-72px;}
}