/*
  GLASS V1 — INTERIOR MOTION ONLY
  Applies to every page except the homepage (build excludes index.html).
  Covers legacy marketing pages, modern About / Annual Plan, blog articles
  and individual course pages. Preserves all approved copy, spacing, colors,
  structure and original animations. Never delays or hides readable content.

  Motion levels:
  1. Autonomous: continuously orbiting/sweeping decorative surfaces.
  2. Hover/focus: lift, glow and tactile response on meaningful controls.
  3. Reduced-motion preference: new motion fully disabled.
*/
@keyframes interior-blue-wander {
  0%,100% {transform:translate3d(-24px,14px,0) scale(.92);opacity:.58}
  50% {transform:translate3d(31px,-19px,0) scale(1.08);opacity:.94}
}
@keyframes interior-luminous-ring {
  from {transform:rotate(0deg);opacity:.8}
  50% {opacity:1}
  to {transform:rotate(360deg);opacity:.8}
}
@keyframes interior-glass-sheen {
  0%,16% {background-position:185% 0;opacity:0}
  30%,49% {opacity:.64}
  63%,100% {background-position:-80% 0;opacity:0}
}
@keyframes interior-breath-light {
  0%,100% {box-shadow:0 0 0 0 rgba(38,139,250,.14),0 9px 26px rgba(34,113,210,.07)}
  50% {box-shadow:0 0 0 9px rgba(38,139,250,.06),0 17px 32px rgba(34,113,210,.13)}
}
@keyframes interior-halo-sway {
  0%,100% {opacity:.51;transform:translate3d(-17px,10px,0) scale(.9)}
  50% {opacity:.9;transform:translate3d(28px,-13px,0) scale(1.08)}
}

/* A. Continuous motion — only decorative pseudo-elements. */
@media (prefers-reduced-motion:no-preference) {
  /* Modern pages /about and /annual-plan: their original Glass V1 hero
     remains untouched; the new orbit is a separate layer behind content. */
  body:not(.v13-legacy) main .hero .hero-grid {
    isolation:isolate;
  }
  body:not(.v13-legacy) main .hero .hero-grid::before {
    content:"";pointer-events:none;position:absolute;z-index:-1;
    width:clamp(290px,37vw,550px);aspect-ratio:1;
    top:3%;left:-3%;border-radius:50%;
    background:conic-gradient(from 13deg,transparent 0deg,
      rgba(34,124,239,.22) 36deg,rgba(61,175,255,.83) 70deg,
      rgba(17,95,225,.32) 111deg,transparent 148deg,
      transparent 218deg,rgba(59,161,246,.65) 257deg,transparent 300deg);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 10px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 10px));
    animation:interior-luminous-ring 16s linear infinite;
  }
  body:not(.v13-legacy) main .hero .hero-grid::after {
    content:"";pointer-events:none;position:absolute;z-index:-1;
    width:clamp(290px,33vw,475px);aspect-ratio:1;
    left:-8%;top:9%;border-radius:50%;
    background:radial-gradient(circle,rgba(69,154,249,.34),
      rgba(117,205,253,.17) 46%,transparent 75%);
    animation:interior-blue-wander 10s ease-in-out infinite;
  }
  /* Visual narrative blocks: shimmer stays behind the actual content. */
  /* Old V15 intentionally freezes .story-orbit-stage animation!important.
     Animate its independent decorative pseudo-element instead; never bypass
     the old reset or replace the stage positioning transform. */
  body:not(.v13-legacy) main .story-orbit-stage::after {
    content:"";position:absolute;pointer-events:none;z-index:0;
    inset:-5px;border-radius:inherit;
    animation:interior-breath-light 7s ease-in-out infinite;
  }
  body:not(.v13-legacy) main .story-orbit-stage:nth-of-type(3)::after {animation-delay:-2.5s}
  body:not(.v13-legacy) main .story-orbit-stage:nth-of-type(4)::after {animation-delay:-4s}
  body:not(.v13-legacy) main .file-panel {
    animation:interior-breath-light 11s ease-in-out infinite;
  }

  /* Older V13 system has important rules deliberately disabling its original
     animations. Avoid fighting them: use pseudo-elements of other wrappers. */
  .v13-legacy main :is(.v9-heading,.p8-heading,.intro) {position:relative;isolation:isolate}
  .v13-legacy main :is(.v9-heading,.p8-heading,.intro)::after {
    content:"";position:absolute;z-index:-1;pointer-events:none;
    width:min(280px,calc(100% - 76px));aspect-ratio:1;
    left:28px;top:-26%;border-radius:50%;
    background:radial-gradient(circle,rgba(70,163,249,.25),
      rgba(129,206,255,.12) 48%,transparent 74%);
    animation:interior-halo-sway 11s ease-in-out infinite;
  }
  .v13-legacy main :is(.v9-heading,.p8-heading,.intro):nth-of-type(2)::after{animation-delay:-5s}

  /* A transparent cyan reflection floats BEHIND the 3-step explanation. */
  .v13-legacy main .story-flow::after {
    content:"";position:absolute;pointer-events:none;z-index:-1;
    width:72%;aspect-ratio:1;
    left:-18%;bottom:-40%;border-radius:50%;
    background:radial-gradient(circle,rgba(96,199,255,.43),
      rgba(95,172,247,.16) 50%,transparent 74%);
    animation:interior-blue-wander 10s ease-in-out infinite;
  }
  .v13-legacy main .story-flow-symbol {
    animation:interior-breath-light 6s ease-in-out infinite;
  }

  /* Legacy hero orbits from site-glass-legacy.css already run on the hero
     GRID pseudo-elements. This additional glint lives on a different child,
     never overriding or reviving the deliberately frozen V13 visual motion. */
  .v13-legacy main :is(.v9-visual,.p8-visual,.hub-signal)
    :is(.v9-vtop,.p8-visual-top,.signal-top) {
    position:relative;
  }
  .v13-legacy main :is(.v9-visual,.p8-visual,.hub-signal)
    :is(.v9-vtop,.p8-visual-top,.signal-top)::after {
    content:"";position:absolute;pointer-events:none;
    height:2px;width:56%;bottom:-11px;inset-inline-start:0;
    border-radius:4px;background-size:240% 100%;
    background:linear-gradient(90deg,transparent,#47a8ff,#a7edff,transparent);
    animation:interior-glass-sheen 9s linear infinite;
  }

  /* Real reading pages need calm atmosphere, not flashing text. */
  .v13-legacy :is(main.blog-main,main.cd-main) {
    position:relative;isolation:isolate;
  }
  .v13-legacy :is(main.blog-main,main.cd-main)::after {
    content:"";position:absolute;pointer-events:none;z-index:-1;
    top:65px;left:22px;
    width:min(500px,calc(100% - 80px));aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,rgba(103,187,255,.28),
      rgba(90,155,245,.11) 46%,transparent 73%);
    animation:interior-halo-sway 14s ease-in-out infinite;
  }
}

/* B. Pointer / keyboard response — only interactive and card surfaces.
   The visual lift has a short easing; no entrance animation gates content. */
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .v13-legacy main :is(
    .v9-card,.v9-story,.fc-card,.p8-card,.choice,.product-card,
    .deliverable,.editorial-compare-card,.v9-stat,.req-side-card,
    .case-card,.cl-card,.v10-feature,.v9-vline,.signal-card
  ) {
    transition:transform .34s cubic-bezier(.2,.8,.2,1),
      box-shadow .34s ease,border-color .34s ease,background-color .34s ease;
    will-change:auto;
  }
  .v13-legacy main :is(
    .v9-card,.v9-story,.fc-card,.p8-card,.choice,.product-card,
    .deliverable,.editorial-compare-card,.v9-stat,.req-side-card,
    .case-card,.cl-card,.v10-feature
  ):is(:hover,:focus-within) {
    transform:translate3d(0,-6px,0);
    box-shadow:0 26px 64px rgba(24,100,193,.17),inset 0 1px 0 rgba(255,255,255,.85);
    border-color:rgba(66,149,239,.62);
  }
  /* Tiny response within an already-animated explanatory illustration.
     This does NOT override important safety resets on .v13-openvisual. */
  .v13-legacy main :is(.v9-vline,.signal-card) :is(b,strong),
  .v13-legacy main .story-flow-steps strong {
    transition:color .25s ease;
  }
  .v13-legacy main :is(.v9-vline,.signal-card):hover :is(b,strong),
  .v13-legacy main .story-flow-steps li:hover strong {color:#91dcff}
  .v13-legacy main .story-flow-steps li:hover {
    border-color:rgba(124,195,255,.64);
    box-shadow:0 13px 28px rgba(21,79,144,.13);
  }
  .v13-legacy main :is(a.btn,.case-btn,.req-submit,.p8-final a,.v9-hero .cta a,
    .v9-card a,.v9-story>a,.fc-card a) {
    transition:transform .28s ease,box-shadow .28s ease,
      border-color .28s ease,background-color .28s ease;
  }
  .v13-legacy main :is(a.btn,.case-btn,.req-submit,.p8-final a,.v9-hero .cta a):hover {
    transform:translate3d(0,-3px,0);
    box-shadow:0 17px 37px rgba(20,99,202,.2);
  }
  .v13-legacy main :is(.v9-story>a,.v9-card a,.fc-card a):hover {
    transform:translate3d(-3px,0,0);
  }
  .v13-legacy main :is(.v9-pill,.help-choices button,.req-field select,
    .req-field input,.req-field textarea):hover {
    border-color:#8bbcf6;box-shadow:0 0 0 3px rgba(52,142,244,.08);
    transition:border-color .25s ease,box-shadow .25s ease;
  }
  .v13-legacy main :is(.v9-faq details,.v10-faq details,
    .cl-faq details,.p8-faq details,details.v9-faq):hover {
    border-color:#a9d0ff;box-shadow:0 12px 32px rgba(26,94,181,.09);
    transition:border-color .25s,box-shadow .25s;
  }

  /* Modern About / annual plan: retain original V1 card/diagram hover.
     Extend feedback to editorial tiles, steps and narrative stages only. */
  body:not(.v13-legacy) main :is(.editorial-item,.feature,.step,
    .file-panel,.story-orbit-stage) {
    transition:transform .36s cubic-bezier(.2,.82,.2,1),
      box-shadow .36s ease,border-color .36s ease;
  }
  body:not(.v13-legacy) main :is(.editorial-item,.feature,.step,
    .file-panel,.story-orbit-stage):is(:hover,:focus-within) {
    transform:translate3d(0,-5px,0);
    box-shadow:0 23px 57px rgba(26,103,199,.16);
    border-color:rgba(96,165,245,.62);
  }
  body:not(.v13-legacy) main :is(.btn,.text-link):hover {
    filter:drop-shadow(0 7px 12px rgba(19,98,207,.13));
  }
  .v13-legacy :is(.blog-main,.cd-main) a:is(:hover,:focus-visible){
    text-decoration-thickness:2px;text-underline-offset:5px;
    transition:color .2s ease;
  }
}
/* Accessible keyboard response even on touch/hoverless devices. */
@media (prefers-reduced-motion:no-preference) {
  .v13-legacy main :is(.v9-card,.v9-story,.fc-card,.p8-card,.choice,.deliverable):focus-within {
    border-color:#67a8f3;box-shadow:0 0 0 3px rgba(59,146,240,.1);
  }
}
@media (max-width:620px) and (prefers-reduced-motion:no-preference) {
  /* Lower-cost mobile atmosphere: one visible orbit in the hero and a
     gentle glow in selected reading sections. No forced hover on touch. */
  body:not(.v13-legacy) main .hero .hero-grid::before{width:270px;top:10%;left:-9%}
  body:not(.v13-legacy) main .hero .hero-grid::after{width:240px;top:14%}
  .v13-legacy main :is(.v9-heading,.p8-heading,.intro)::after {
    width:min(230px,calc(100% - 76px));opacity:.63;
  }
  .v13-legacy main .story-flow::after{opacity:.62}
  .v13-legacy main :is(.v9-visual,.p8-visual,.hub-signal)
    :is(.v9-vtop,.p8-visual-top,.signal-top)::after {
    animation-duration:12s;
  }
}
@media (prefers-reduced-motion:reduce) {
  body:not(.v13-legacy) main .hero .hero-grid::before,
  body:not(.v13-legacy) main .hero .hero-grid::after,
  .v13-legacy main :is(.v9-heading,.p8-heading,.intro)::after,
  .v13-legacy main .story-flow::after,
  .v13-legacy main :is(.v9-visual,.p8-visual,.hub-signal)
    :is(.v9-vtop,.p8-visual-top,.signal-top)::after,
  .v13-legacy :is(main.blog-main,main.cd-main)::after {
    content:none!important;animation:none!important;
  }
  body:not(.v13-legacy) main .story-orbit-stage::after,
  body:not(.v13-legacy) main .file-panel,
  .v13-legacy main .story-flow-symbol{
    animation:none!important;
  }
}