/* Fashion on Screen — V39
   Stable opening logo + single, non-blocking page transition.
   This intentionally overrides the older V35/V38 transition layers. */

:root{
  --fos39-deep:#011d1a;
  --fos39-mid:#06483f;
  --fos39-cream:#fff8f2;
  --fos39-ease:cubic-bezier(.2,.8,.2,1);
}

/* Disable native cross-document transitions from older versions.
   A single CSS curtain is more reliable across Safari + IONOS + local previews. */
@view-transition{navigation:none}

/* One entrance curtain on destination pages. It never receives clicks. */
body.v39-page:not(.page-index)::after,
body.v39-page.page-index.v39-quick-entry::after{
  content:""!important;
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:6100!important;
  pointer-events:none!important;
  visibility:visible!important;
  opacity:1!important;
  background:
    linear-gradient(104deg,transparent 0 46%,rgba(255,255,255,.10) 48.8%,rgba(255,255,255,.48) 50%,rgba(255,255,255,.10) 51.2%,transparent 55%),
    linear-gradient(135deg,#011d1a 0%,#06483f 57%,#012722 100%)!important;
  transform:translate3d(0,0,0)!important;
  animation:fos39CurtainOut .30s var(--fos39-ease) both!important;
}
body.v39-page:not(.page-index) main,
body.v39-page:not(.page-index) .site-header,
body.v39-page.page-index.v39-quick-entry main,
body.v39-page.page-index.v39-quick-entry .site-header{
  animation:fos39ContentIn .34s var(--fos39-ease) both!important;
}
body.v39-page.v39-replay main{
  animation:fos39Replay .32s var(--fos39-ease) both!important;
}
@keyframes fos39CurtainOut{
  0%{opacity:1;transform:translate3d(0,0,0)}
  46%{opacity:1}
  100%{opacity:0;transform:translate3d(102%,0,0)}
}
@keyframes fos39ContentIn{
  from{opacity:.56;transform:translate3d(0,5px,0)}
  to{opacity:1;transform:none}
}
@keyframes fos39Replay{
  from{opacity:.72;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

/* Opening screen: children are inert until startup-active is set before first paint.
   This prevents the logo animation from running invisibly and then jumping. */
body.v39-page .fos-startup{
  background:
    radial-gradient(circle at 50% 50%,rgba(38,169,149,.14),transparent 21%),
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.045),transparent 34%),
    linear-gradient(145deg,#010706 0%,#031612 52%,#020908 100%)!important;
}
body.v39-page .fos-startup,
body.v39-page .fos-startup *{
  animation-play-state:paused;
}
body.v39-page .fos-startup-logo,
body.v39-page .fos-startup-copy,
body.v39-page .v9-startup-status,
body.v39-page .v9-startup-sweep,
body.v39-page .fos-startup-beam,
body.v39-page .fos-startup-pulse,
body.v39-page .fos-startup-rings i,
body.v39-page .v38-boot-ribbons i,
body.v39-page .v38-boot-core{
  animation:none!important;
}
body.v39-page.startup-active .fos-startup,
body.v39-page.startup-active .fos-startup *{
  animation-play-state:running;
}
body.v39-page.startup-active .fos-startup{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body.v39-page.startup-active .v9-startup .fos-startup-logo{
  width:min(430px,70vw)!important;
  opacity:0!important;
  filter:none!important;
  transform:translateY(10px) scale(.98)!important;
  animation:fos39LogoIn .78s var(--fos39-ease) forwards .58s!important;
  will-change:opacity,transform;
}
body.v39-page.startup-active .v38-boot-ribbons i:nth-child(1){animation:fos39RibbonA 1.45s var(--fos39-ease) forwards .04s!important}
body.v39-page.startup-active .v38-boot-ribbons i:nth-child(2){animation:fos39RibbonB 1.5s var(--fos39-ease) forwards .10s!important}
body.v39-page.startup-active .v38-boot-ribbons i:nth-child(3){animation:fos39RibbonC 1.55s var(--fos39-ease) forwards .16s!important}
body.v39-page.startup-active .v38-boot-ribbons i:nth-child(4){animation:fos39RibbonD 1.4s var(--fos39-ease) forwards .22s!important}
body.v39-page.startup-active .v38-boot-core{animation:fos39Core 1.2s var(--fos39-ease) forwards .18s!important}
body.v39-page.startup-active .fos-startup-beam{animation:fos39Beam 1.25s var(--fos39-ease) forwards .08s!important}
body.v39-page.startup-active .fos-startup-pulse{animation:fos39Pulse 1.35s var(--fos39-ease) forwards .15s!important}
body.v39-page.startup-active .v9-startup-sweep{animation:fos39Sweep 1.25s var(--fos39-ease) forwards .08s!important}
body.v39-page.startup-active .fos-startup-copy{
  opacity:0;
  color:rgba(255,255,255,.72)!important;
  animation:fos39CopyIn .48s ease forwards .92s!important;
}
body.v39-page.startup-active .v9-startup-status{
  opacity:0;
  color:rgba(255,255,255,.45)!important;
  animation:fos39CopyIn .42s ease forwards .82s!important;
}
body.v39-page.startup-active .v9-startup-skip{
  opacity:0;
  animation:fos39CopyIn .4s ease forwards .74s!important;
}
body.v39-page.startup-end .fos-startup{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .28s ease,visibility .28s ease!important;
}
body.v39-page.startup-end main{animation:fos39HomeReveal .34s var(--fos39-ease) both!important}

@keyframes fos39LogoIn{
  0%{opacity:0;transform:translateY(10px) scale(.98);filter:blur(5px)}
  58%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes fos39CopyIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes fos39RibbonA{0%{opacity:0;transform:translate(-68%,-76%) rotate(-22deg) scale(.75)}45%{opacity:.85}100%{opacity:.48;transform:translate(-49%,-52%) rotate(-9deg) scale(1.01)}}
@keyframes fos39RibbonB{0%{opacity:0;transform:translate(-28%,-18%) rotate(34deg) scale(.66)}48%{opacity:.68}100%{opacity:.36;transform:translate(-52%,-47%) rotate(17deg) scale(1)}}
@keyframes fos39RibbonC{0%{opacity:0;transform:translate(-78%,-26%) rotate(14deg) scale(.72)}46%{opacity:.58}100%{opacity:.28;transform:translate(-54%,-50%) rotate(5deg) scale(1.04)}}
@keyframes fos39RibbonD{0%{opacity:0;transform:translate(-20%,-80%) rotate(-42deg) scale(.62)}48%{opacity:.62}100%{opacity:.32;transform:translate(-52%,-48%) rotate(-21deg) scale(1.03)}}
@keyframes fos39Core{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}40%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.12;transform:translate(-50%,-50%) scale(.5)}}
@keyframes fos39Beam{0%{opacity:0;transform:scaleX(.02)}28%{opacity:1}66%{opacity:.82;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.72)}}
@keyframes fos39Pulse{0%{opacity:0;transform:scale(.1)}30%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(7)}}
@keyframes fos39Sweep{0%{transform:scaleX(.02);opacity:0}48%{transform:scaleX(1);opacity:.46}100%{transform:scaleX(.65);opacity:0}}
@keyframes fos39HomeReveal{from{opacity:.6;transform:scale(.996)}to{opacity:1;transform:none}}

/* Keep the professional menu readable after transition changes. */
body.v39-page .nav-dropdown-menu :where(b,small){opacity:1!important}
body.v39-page .nav-dropdown-menu small{color:rgba(255,248,242,.84)!important}
body.v39-page .nav-dropdown-menu b{color:#fff!important}

@media(max-width:780px){
  body.v39-page:not(.page-index)::after,body.v39-page.page-index.v39-quick-entry::after{animation-duration:.26s!important}
  body.v39-page.startup-active .v9-startup .fos-startup-logo{width:min(310px,72vw)!important}
}
@media(prefers-reduced-motion:reduce){
  body.v39-page::after{display:none!important}
  body.v39-page main,body.v39-page .site-header{animation:none!important}
  body.v39-page .fos-startup{display:none!important}
}