/* Fashion on Screen — V38
   Clearer professional menu + rapid page transitions + console-inspired boot sequence.
   Navigation remains native: no link interception. */

:root{
  --fos38-deep:#011d1a;
  --fos38-green:#043f38;
  --fos38-green-2:#075a4f;
  --fos38-cream:#fff8f2;
  --fos38-copy:rgba(255,248,242,.88);
  --fos38-muted:rgba(255,248,242,.76);
  --fos38-line:rgba(255,248,242,.18);
  --fos38-ease:cubic-bezier(.2,.8,.2,1);
}

/* Professional dropdown: larger, brighter and easier to scan. */
body.v38-page .nav-dropdown-toggle{
  color:#fff!important;
  font-weight:700!important;
  letter-spacing:.005em!important;
  text-shadow:0 1px 12px rgba(0,0,0,.18);
}
body.v38-page .nav-dropdown-menu{
  width:540px!important;
  padding:12px!important;
  gap:8px!important;
  background:rgba(2,35,31,.985)!important;
  border:1px solid rgba(255,248,242,.22)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(18px) saturate(118%);
}
body.v38-page .nav-dropdown-menu a{
  min-height:84px!important;
  padding:15px 16px!important;
  border:1px solid rgba(255,248,242,.11)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.025)!important;
  color:#fff!important;
}
body.v38-page .nav-dropdown-menu small{
  display:block!important;
  margin-bottom:5px!important;
  color:rgba(255,248,242,.82)!important;
  opacity:1!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:650!important;
  letter-spacing:.075em!important;
}
body.v38-page .nav-dropdown-menu b{
  color:#fff!important;
  font-size:17px!important;
  line-height:1.18!important;
  font-weight:650!important;
  letter-spacing:-.01em!important;
}
body.v38-page .nav-dropdown-menu a:hover,
body.v38-page .nav-dropdown-menu a:focus-visible,
body.v38-page .nav-dropdown-menu a[aria-current="page"]{
  background:var(--fos38-cream)!important;
  border-color:var(--fos38-cream)!important;
  color:#022e29!important;
}
body.v38-page .nav-dropdown-menu a:hover :is(b,small),
body.v38-page .nav-dropdown-menu a:focus-visible :is(b,small),
body.v38-page .nav-dropdown-menu a[aria-current="page"] :is(b,small){
  color:#022e29!important;
}

/* Mobile professional navigation gets the same contrast treatment. */
body.v38-page .mobile-menu-pro{
  background:linear-gradient(155deg,#062f2a,#011f1c)!important;
  border:1px solid rgba(255,248,242,.16)!important;
  border-radius:18px!important;
  padding:16px!important;
}
body.v38-page .mobile-menu-pro .menu-group-label{
  color:rgba(255,248,242,.82)!important;
  font-weight:700!important;
}
body.v38-page .mobile-menu-pro a{
  color:#fff!important;
  font-weight:620!important;
  opacity:1!important;
}
body.v38-page .mobile-menu-pro a:hover,
body.v38-page .mobile-menu-pro a[aria-current="page"]{
  color:#fff!important;
  background:rgba(255,255,255,.07)!important;
}

/* Fast page opening/change animation. Existing V35 veil is disabled here. */
body.v38-page:not(.page-index)::after{
  content:""!important;
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:6100!important;
  pointer-events:none!important;
  background:
    linear-gradient(102deg,transparent 0 47%,rgba(255,255,255,.34) 49.4%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.16) 50.6%,transparent 54%),
    linear-gradient(135deg,#021f1c 0%,#06483f 56%,#012a25 100%)!important;
  transform:translate3d(0,0,0)!important;
  opacity:1!important;
  animation:fos38CurtainOut .34s var(--fos38-ease) both!important;
}
body.v38-page.v38-entering:not(.page-index) main{
  animation:fos38MainIn .36s var(--fos38-ease) both!important;
}
body.v38-page.v38-entering:not(.page-index) .site-header{
  animation:fos38HeaderIn .28s var(--fos38-ease) both!important;
}
body.v38-page.page-index.startup-end main{
  animation:fos38HomeReveal .48s var(--fos38-ease) both;
}
@keyframes fos38CurtainOut{
  0%{opacity:1;transform:translate3d(0,0,0)}
  58%{opacity:1}
  100%{opacity:0;transform:translate3d(103%,0,0)}
}
@keyframes fos38MainIn{
  from{opacity:.42;transform:translate3d(0,9px,0);filter:blur(1.5px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes fos38HeaderIn{
  from{opacity:0;transform:translate3d(0,-7px,0)}
  to{opacity:1;transform:none}
}
@keyframes fos38HomeReveal{
  from{opacity:.15;transform:scale(.992);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}

/* Cross-document view transitions where supported. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fos38OldPage .14s ease both!important}
::view-transition-new(root){animation:fos38NewPage .26s var(--fos38-ease) both!important}
@keyframes fos38OldPage{to{opacity:.5;transform:scale(.997)}}
@keyframes fos38NewPage{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Console-style opening sequence: dark field, luminous ribbons, logo reveal. */
body.v38-page .v9-startup{
  background:
    radial-gradient(circle at 50% 50%,rgba(28,145,125,.18),transparent 20%),
    radial-gradient(circle at 52% 44%,rgba(255,255,255,.065),transparent 32%),
    linear-gradient(145deg,#020908 0%,#031612 52%,#010706 100%)!important;
}
body.v38-page .v9-startup::before,
body.v38-page .v9-startup::after{
  opacity:.18!important;
  border-color:rgba(255,255,255,.12)!important;
}
body.v38-page .v9-startup-frame{opacity:.18!important}
body.v38-page .fos-startup-rings{opacity:.14!important;filter:blur(.2px)}
body.v38-page .fos-startup-beam{
  height:1px!important;
  width:min(76vw,900px)!important;
  background:linear-gradient(90deg,transparent,rgba(186,255,244,.12),#fff,rgba(186,255,244,.16),transparent)!important;
  filter:drop-shadow(0 0 18px rgba(124,255,229,.65))!important;
  animation:fos38BootBeam 1.55s var(--fos38-ease) forwards .12s!important;
}
body.v38-page .fos-startup-pulse{
  background:radial-gradient(circle,#fff 0%,rgba(176,255,241,.95) 18%,rgba(83,214,190,.28) 48%,transparent 70%)!important;
  animation:fos38Pulse 1.65s var(--fos38-ease) forwards .18s!important;
}
body.v38-page .v38-boot-ribbons{
  position:absolute;
  inset:-12%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
body.v38-page .v38-boot-ribbons i{
  position:absolute;
  left:50%;
  top:50%;
  width:145%;
  height:38%;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:rgba(219,255,249,.78);
  border-left-color:rgba(70,221,195,.26);
  box-shadow:0 -8px 35px rgba(167,255,240,.15), inset 0 10px 28px rgba(38,169,149,.08);
  filter:drop-shadow(0 0 14px rgba(158,255,239,.24));
  opacity:0;
  transform-origin:center;
}
body.v38-page .v38-boot-ribbons i:nth-child(1){animation:fos38RibbonA 1.75s var(--fos38-ease) forwards .05s}
body.v38-page .v38-boot-ribbons i:nth-child(2){width:128%;height:33%;animation:fos38RibbonB 1.8s var(--fos38-ease) forwards .15s}
body.v38-page .v38-boot-ribbons i:nth-child(3){width:156%;height:42%;border-top-color:rgba(255,255,255,.45);animation:fos38RibbonC 1.9s var(--fos38-ease) forwards .22s}
body.v38-page .v38-boot-ribbons i:nth-child(4){width:112%;height:30%;border-top-color:rgba(106,238,214,.52);animation:fos38RibbonD 1.65s var(--fos38-ease) forwards .28s}
body.v38-page .v38-boot-core{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 22px #fff,0 0 48px rgba(96,239,215,.78),0 0 100px rgba(20,122,105,.5);
  opacity:0;
  transform:translate(-50%,-50%) scale(.2);
  animation:fos38Core 1.5s var(--fos38-ease) forwards .2s;
}
body.v38-page .v9-startup .fos-startup-logo{
  z-index:5!important;
  width:min(430px,70vw)!important;
  filter:brightness(0) invert(1) drop-shadow(0 0 22px rgba(255,255,255,.08))!important;
  opacity:0!important;
  transform:translateY(12px) scale(.975)!important;
  animation:fos38LogoIn 1.08s var(--fos38-ease) forwards .78s!important;
}
body.v38-page .fos-startup-copy{
  z-index:5!important;
  color:rgba(255,255,255,.72)!important;
  letter-spacing:.36em!important;
  animation:fos38CopyIn .72s ease forwards 1.15s!important;
}
body.v38-page .v9-startup-status{
  color:rgba(255,255,255,.46)!important;
  animation:fos38Status .6s ease forwards .92s!important;
}
body.v38-page .v9-startup-sweep{
  opacity:.34!important;
  animation:fos38Sweep 1.55s var(--fos38-ease) forwards .12s!important;
}
body.v38-page.startup-end .fos-startup{
  transition:opacity .42s ease,visibility .42s ease!important;
}
@keyframes fos38RibbonA{
  0%{opacity:0;transform:translate(-68%,-78%) rotate(-24deg) scale(.72)}
  38%{opacity:.95}
  100%{opacity:.58;transform:translate(-48%,-52%) rotate(-9deg) scale(1.02)}
}
@keyframes fos38RibbonB{
  0%{opacity:0;transform:translate(-24%,-18%) rotate(38deg) scale(.62)}
  48%{opacity:.72}
  100%{opacity:.42;transform:translate(-52%,-46%) rotate(18deg) scale(1)}
}
@keyframes fos38RibbonC{
  0%{opacity:0;transform:translate(-80%,-28%) rotate(16deg) scale(.68)}
  44%{opacity:.65}
  100%{opacity:.3;transform:translate(-54%,-50%) rotate(5deg) scale(1.06)}
}
@keyframes fos38RibbonD{
  0%{opacity:0;transform:translate(-18%,-82%) rotate(-46deg) scale(.58)}
  48%{opacity:.7}
  100%{opacity:.36;transform:translate(-52%,-48%) rotate(-22deg) scale(1.05)}
}
@keyframes fos38BootBeam{
  0%{opacity:0;transform:scaleX(.015)}
  22%{opacity:1}
  64%{opacity:.88;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(.72)}
}
@keyframes fos38Pulse{
  0%{opacity:0;transform:scale(.1)}
  28%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(8)}
}
@keyframes fos38Core{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  38%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:.18;transform:translate(-50%,-50%) scale(.55)}
}
@keyframes fos38LogoIn{
  0%{opacity:0;transform:translateY(12px) scale(.975);filter:brightness(0) invert(1) blur(10px)}
  52%{opacity:1;filter:brightness(0) invert(1) blur(0)}
  100%{opacity:1;transform:none;filter:brightness(0) invert(1)}
}
@keyframes fos38CopyIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes fos38Status{to{opacity:1}}
@keyframes fos38Sweep{0%{transform:scaleX(.02);opacity:0}45%{transform:scaleX(1);opacity:.55}100%{transform:scaleX(.64);opacity:0}}

@media(max-width:780px){
  body.v38-page .nav-dropdown-menu{width:min(94vw,540px)!important}
  body.v38-page .v9-startup .fos-startup-logo{width:min(320px,72vw)!important}
  body.v38-page .v38-boot-ribbons{inset:-28%}
  body.v38-page:not(.page-index)::after{animation-duration:.29s!important}
}
@media(prefers-reduced-motion:reduce){
  body.v38-page:not(.page-index)::after{display:none!important}
  body.v38-page.v38-entering main,
  body.v38-page.v38-entering .site-header,
  body.v38-page.page-index.startup-end main,
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  body.v38-page .v38-boot-ribbons,
  body.v38-page .v38-boot-core{display:none!important}
}