/* Fashion on Screen — V40
   Unified opening + page entrance animations for desktop and mobile.
   V40 deliberately neutralizes older V35/V38/V39 transition layers. */

:root{
  --fos40-deep:#010b09;
  --fos40-green:#043f38;
  --fos40-glow:#75ead5;
  --fos40-cream:#fff8f2;
  --fos40-ease:cubic-bezier(.16,1,.3,1);
}

/* Never let legacy page-transition layers stack with V40. */
body.v40-page .fos-page-transition{display:none!important}
@view-transition{navigation:none}
::view-transition-old(root),::view-transition-new(root){animation:none!important}

/* Destination-page entrance. Native navigation stays untouched. */
body.v40-page:not(.page-index)::after,
body.v40-page.page-index.v40-quick-entry::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:6090!important;
  pointer-events:none!important;
  background:
    linear-gradient(112deg,transparent 0 42%,rgba(159,255,237,.12) 47%,rgba(255,255,255,.55) 50%,rgba(159,255,237,.12) 53%,transparent 59%),
    linear-gradient(135deg,#010b09 0%,#043f38 58%,#01211d 100%)!important;
  transform:translate3d(0,0,0)!important;
  opacity:1!important;
  visibility:visible!important;
  will-change:transform,opacity;
  animation:fos40PageCurtain .26s var(--fos40-ease) both!important;
}
body.v40-page:not(.page-index) main,
body.v40-page:not(.page-index) .site-header,
body.v40-page.page-index.v40-quick-entry main,
body.v40-page.page-index.v40-quick-entry .site-header{
  animation:fos40PageContent .30s var(--fos40-ease) both!important;
}
body.v40-page.v40-replay main{animation:fos40Replay .24s var(--fos40-ease) both!important}

@keyframes fos40PageCurtain{
  0%{opacity:1;transform:translate3d(0,0,0)}
  36%{opacity:1}
  100%{opacity:0;transform:translate3d(102%,0,0)}
}
@keyframes fos40PageContent{
  from{opacity:.62;transform:translate3d(0,5px,0)}
  to{opacity:1;transform:none}
}
@keyframes fos40Replay{from{opacity:.78;transform:translateY(3px)}to{opacity:1;transform:none}}

/* --- Unified startup shell --- */
body.v40-page .fos-startup{
  display:none!important;
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:100svh!important;
  z-index:7000!important;
  place-items:center!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(52,206,177,.13),transparent 20%),
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.045),transparent 34%),
    linear-gradient(145deg,#010605 0%,#031612 54%,#010807 100%)!important;
  isolation:isolate;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
body.v40-page.startup-active{overflow:hidden!important;touch-action:none}
body.v40-page.startup-active .fos-startup,
body.v40-page.startup-end .fos-startup{
  display:grid!important;
  visibility:visible!important;
}
body.v40-page.startup-active .fos-startup{
  opacity:1!important;
  pointer-events:auto!important;
}
body.v40-page.startup-end .fos-startup{
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .24s ease!important;
}

/* Neutralize every older boot animation before V40 becomes ready. */
body.v40-page .fos-startup::before,
body.v40-page .fos-startup::after,
body.v40-page .fos-startup *,
body.v40-page .fos-startup *::before,
body.v40-page .fos-startup *::after{
  animation:none!important;
}
body.v40-page .fos-startup::before,
body.v40-page .fos-startup::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border:0!important;
  border-radius:0!important;
  translate:none!important;
  transform:none!important;
  pointer-events:none!important;
}
body.v40-page .fos-startup::before{
  background:radial-gradient(circle at 50% 50%,transparent 0 24%,rgba(98,231,207,.08) 25%,transparent 26% 100%)!important;
  opacity:.45!important;
}
body.v40-page .fos-startup::after{
  background:linear-gradient(90deg,transparent 0 48.8%,rgba(255,255,255,.18) 50%,transparent 51.2%)!important;
  opacity:.22!important;
}

body.v40-page .fos-startup-inner{
  position:relative!important;
  width:min(1180px,100vw)!important;
  height:100%!important;
  max-height:none!important;
  display:grid!important;
  place-items:center!important;
  padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))!important;
  box-sizing:border-box!important;
}

/* Remove decorative systems that caused duplicated motion. */
body.v40-page .v9-startup-frame,
body.v40-page .fos-startup-rings{display:none!important}

body.v40-page .v38-boot-ribbons{
  position:absolute!important;
  inset:-18%!important;
  z-index:1!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
body.v40-page .v38-boot-ribbons i{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  border:2px solid transparent!important;
  border-top-color:rgba(218,255,248,.72)!important;
  border-left-color:rgba(62,210,184,.20)!important;
  border-radius:50%!important;
  box-shadow:0 -8px 38px rgba(133,255,233,.13),inset 0 10px 30px rgba(38,169,149,.06)!important;
  filter:drop-shadow(0 0 14px rgba(123,255,231,.20))!important;
  opacity:0!important;
  transform-origin:center!important;
  will-change:transform,opacity;
}
body.v40-page .v38-boot-ribbons i:nth-child(1){width:145%!important;height:38%!important}
body.v40-page .v38-boot-ribbons i:nth-child(2){width:128%!important;height:33%!important}
body.v40-page .v38-boot-ribbons i:nth-child(3){width:156%!important;height:42%!important;border-top-color:rgba(255,255,255,.42)!important}
body.v40-page .v38-boot-ribbons i:nth-child(4){width:112%!important;height:30%!important;border-top-color:rgba(106,238,214,.46)!important}
body.v40-page .v38-boot-core{
  position:absolute!important;
  z-index:2!important;
  left:50%!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 0 22px #fff,0 0 50px rgba(96,239,215,.72),0 0 110px rgba(20,122,105,.42)!important;
  opacity:0!important;
  transform:translate(-50%,-50%) scale(.2)!important;
  will-change:transform,opacity;
}
body.v40-page .fos-startup-beam{
  position:absolute!important;
  z-index:2!important;
  left:50%!important;
  top:50%!important;
  width:min(78vw,900px)!important;
  height:1px!important;
  margin:0!important;
  transform:translate(-50%,-50%) scaleX(.02)!important;
  opacity:0!important;
  background:linear-gradient(90deg,transparent,rgba(188,255,244,.10),#fff,rgba(188,255,244,.14),transparent)!important;
  filter:drop-shadow(0 0 16px rgba(124,255,229,.58))!important;
  will-change:transform,opacity;
}
body.v40-page .fos-startup-pulse{
  position:absolute!important;
  z-index:2!important;
  left:50%!important;
  top:50%!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%) scale(.1)!important;
  opacity:0!important;
  background:radial-gradient(circle,#fff 0%,rgba(176,255,241,.92) 18%,rgba(83,214,190,.26) 48%,transparent 70%)!important;
  will-change:transform,opacity;
}
body.v40-page .v9-startup-sweep{
  position:absolute!important;
  z-index:2!important;
  left:12%!important;
  right:12%!important;
  top:50%!important;
  height:1px!important;
  opacity:0!important;
  transform:scaleX(.02)!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent)!important;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.36))!important;
  will-change:transform,opacity;
}
body.v40-page .fos-startup-logo{
  position:relative!important;
  z-index:5!important;
  width:clamp(230px,31vw,430px)!important;
  max-width:76vw!important;
  height:auto!important;
  opacity:0!important;
  filter:none!important;
  transform:translate3d(0,10px,0) scale(.975)!important;
  will-change:transform,opacity,filter;
}
body.v40-page .fos-startup-copy{
  position:absolute!important;
  z-index:5!important;
  left:50%!important;
  top:calc(50% + 104px)!important;
  translate:-50% 0!important;
  width:min(86vw,520px)!important;
  margin:0!important;
  text-align:center!important;
  white-space:normal!important;
  font-size:10px!important;
  line-height:1.5!important;
  letter-spacing:.34em!important;
  text-transform:uppercase!important;
  color:rgba(255,255,255,.72)!important;
  opacity:0!important;
}
body.v40-page .v9-startup-status{
  position:absolute!important;
  z-index:5!important;
  left:max(22px,env(safe-area-inset-left))!important;
  bottom:max(20px,env(safe-area-inset-bottom))!important;
  font-size:8px!important;
  letter-spacing:.18em!important;
  color:rgba(255,255,255,.42)!important;
  opacity:0!important;
}
body.v40-page .v9-startup-skip{
  position:absolute!important;
  z-index:7!important;
  right:max(22px,env(safe-area-inset-right))!important;
  bottom:max(18px,env(safe-area-inset-bottom))!important;
  min-height:36px!important;
  padding:9px 14px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.035)!important;
  color:rgba(255,255,255,.82)!important;
  opacity:0!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent;
}

/* Animations begin only after JS confirms the logo is decoded or timeout-safe. */
body.v40-page.startup-active.startup-ready .v38-boot-ribbons i:nth-child(1){animation:fos40RibbonA 1.20s var(--fos40-ease) forwards .02s!important}
body.v40-page.startup-active.startup-ready .v38-boot-ribbons i:nth-child(2){animation:fos40RibbonB 1.24s var(--fos40-ease) forwards .08s!important}
body.v40-page.startup-active.startup-ready .v38-boot-ribbons i:nth-child(3){animation:fos40RibbonC 1.30s var(--fos40-ease) forwards .12s!important}
body.v40-page.startup-active.startup-ready .v38-boot-ribbons i:nth-child(4){animation:fos40RibbonD 1.18s var(--fos40-ease) forwards .16s!important}
body.v40-page.startup-active.startup-ready .v38-boot-core{animation:fos40Core .96s var(--fos40-ease) forwards .13s!important}
body.v40-page.startup-active.startup-ready .fos-startup-beam{animation:fos40Beam 1.06s var(--fos40-ease) forwards .05s!important}
body.v40-page.startup-active.startup-ready .fos-startup-pulse{animation:fos40Pulse 1.02s var(--fos40-ease) forwards .11s!important}
body.v40-page.startup-active.startup-ready .v9-startup-sweep{animation:fos40Sweep 1.05s var(--fos40-ease) forwards .05s!important}
body.v40-page.startup-active.startup-ready .fos-startup-logo{animation:fos40Logo .62s var(--fos40-ease) forwards .46s!important}
body.v40-page.startup-active.startup-ready .fos-startup-copy{animation:fos40Text .34s ease forwards .73s!important}
body.v40-page.startup-active.startup-ready .v9-startup-status{animation:fos40Text .30s ease forwards .67s!important}
body.v40-page.startup-active.startup-ready .v9-startup-skip{animation:fos40Text .28s ease forwards .58s!important}

@keyframes fos40Logo{0%{opacity:0;transform:translate3d(0,10px,0) scale(.975);filter:blur(4px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes fos40Text{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fos40Core{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}40%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.10;transform:translate(-50%,-50%) scale(.48)}}
@keyframes fos40Beam{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.02)}28%{opacity:1}68%{opacity:.82;transform:translate(-50%,-50%) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) scaleX(.72)}}
@keyframes fos40Pulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}28%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(6.2)}}
@keyframes fos40Sweep{0%{opacity:0;transform:scaleX(.02)}48%{opacity:.42;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.68)}}
@keyframes fos40RibbonA{0%{opacity:0;transform:translate(-68%,-76%) rotate(-22deg) scale(.76)}46%{opacity:.82}100%{opacity:.42;transform:translate(-49%,-52%) rotate(-9deg) scale(1)}}
@keyframes fos40RibbonB{0%{opacity:0;transform:translate(-28%,-18%) rotate(34deg) scale(.67)}48%{opacity:.64}100%{opacity:.31;transform:translate(-52%,-47%) rotate(17deg) scale(1)}}
@keyframes fos40RibbonC{0%{opacity:0;transform:translate(-78%,-26%) rotate(14deg) scale(.72)}46%{opacity:.54}100%{opacity:.25;transform:translate(-54%,-50%) rotate(5deg) scale(1.03)}}
@keyframes fos40RibbonD{0%{opacity:0;transform:translate(-20%,-80%) rotate(-42deg) scale(.64)}48%{opacity:.58}100%{opacity:.28;transform:translate(-52%,-48%) rotate(-21deg) scale(1.02)}}

body.v40-page.startup-end main,
body.v40-page.startup-end .site-header{animation:fos40HomeReveal .28s var(--fos40-ease) both!important}
@keyframes fos40HomeReveal{from{opacity:.68;transform:scale(.997)}to{opacity:1;transform:none}}

/* Mobile-specific boot: fewer elements, shorter movement, safe-area aware. */
@media(max-width:820px){
  body.v40-page:not(.page-index)::after,
  body.v40-page.page-index.v40-quick-entry::after{animation-duration:.22s!important}
  body.v40-page:not(.page-index) main,
  body.v40-page:not(.page-index) .site-header,
  body.v40-page.page-index.v40-quick-entry main,
  body.v40-page.page-index.v40-quick-entry .site-header{animation-duration:.25s!important}
  body.v40-page .fos-startup-inner{padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom))!important}
  body.v40-page .v38-boot-ribbons{inset:-30%!important}
  body.v40-page .v38-boot-ribbons i{border-width:1px!important;filter:drop-shadow(0 0 10px rgba(123,255,231,.16))!important}
  body.v40-page .v38-boot-ribbons i:nth-child(3),
  body.v40-page .v38-boot-ribbons i:nth-child(4){display:none!important}
  body.v40-page .v9-startup-sweep{left:7%!important;right:7%!important}
  body.v40-page .fos-startup-beam{width:88vw!important}
  body.v40-page .fos-startup-logo{width:min(68vw,300px)!important;max-width:300px!important}
  body.v40-page .fos-startup-copy{top:calc(50% + 82px)!important;width:82vw!important;font-size:8px!important;letter-spacing:.22em!important;line-height:1.6!important}
  body.v40-page .v9-startup-status{left:max(14px,env(safe-area-inset-left))!important;bottom:max(15px,env(safe-area-inset-bottom))!important;font-size:7px!important}
  body.v40-page .v9-startup-skip{right:max(14px,env(safe-area-inset-right))!important;bottom:max(12px,env(safe-area-inset-bottom))!important;min-height:34px!important;padding:8px 12px!important;font-size:8px!important}
  body.v40-page.startup-active.startup-ready .v38-boot-ribbons i:nth-child(1){animation-duration:.96s!important}
  body.v40-page.startup-active.startup-ready .v38-boot-ribbons i:nth-child(2){animation-duration:1.02s!important}
  body.v40-page.startup-active.startup-ready .fos-startup-logo{animation-delay:.36s!important;animation-duration:.52s!important}
  body.v40-page.startup-active.startup-ready .fos-startup-copy{animation-delay:.62s!important}
}

@media(max-width:420px){
  body.v40-page .fos-startup-logo{width:min(72vw,270px)!important}
  body.v40-page .fos-startup-copy{top:calc(50% + 74px)!important;letter-spacing:.18em!important}
  body.v40-page .v9-startup-status{max-width:45vw!important;line-height:1.35!important}
}

@media(prefers-reduced-motion:reduce){
  body.v40-page .fos-startup{display:none!important}
  body.v40-page::after{display:none!important}
  body.v40-page main,body.v40-page .site-header{animation:none!important;transition:none!important}
}