/* ==========================================================================
   XOXO, Rishita - styles.css
   Keep this file next to loader.html (same folder).
   Sections, top to bottom:
     1. LOADER            the black screen, puzzle pieces and the "Hailing a Verse or Two..." text
     2. COLOURS + NAVBAR  gold / silver tokens, the transparent navbar
     3. BANNER            the 1920 x 400 banner
     4. HOME PAGE         the figure-8 helix, captions, cards
     5. INNER PAGES       shop / blog / about / contact
     6. POP-UP VIEWER     the big view when someone taps a design
   ========================================================================== */
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }
  body{ background:#000; font-family:system-ui,sans-serif; }
  body.locked{ overflow:hidden; }

  /* ---------- LOADER ---------- */
  #loader{
    position:fixed; inset:0; z-index:9999; overflow:hidden; cursor:pointer;
    background:#000;
    transition: opacity 1.2s ease, transform 1.2s ease, visibility 0s linear 1.2s;
  }
  #loader.leaving{ opacity:0; transform:scale(1.05); visibility:hidden; pointer-events:none; }

  /* ---------- TEXT ----------
     Performance rule: everything that moves here only changes transform / opacity / hue-rotate
     (GPU-friendly). No blur filters, no SVG filters, and no animated CSS variables. */
  .verse-wrap{
    position:absolute; inset:0; z-index:1;
    display:grid; place-items:center; padding:0 5vw; text-align:center;
  }
  .verse-wrap > *{ grid-area:1 / 1; }

  .verse{
    font-family:'Pinyon Script','Snell Roundhand','Brush Script MT',cursive;
    font-size:clamp(1.87rem, 6.67vw, 5.33rem); line-height:1.1; font-weight:400;
    color:transparent;
    /* bold neon bands that loop seamlessly (first color = last color) */
    background:linear-gradient(90deg,
      #ff1f6d, #ff9f1c, #fff200, #3dff6e, #00e5ff, #6a5cff, #ff2bd6, #ff1f6d);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text;
    animation: slide 6s linear infinite, hueSpin 8s linear infinite;
  }
  @keyframes slide{ to{ background-position:150% 0; } }
  @keyframes hueSpin{ to{ filter:hue-rotate(360deg); } }

  /* Chromatic ghosts: two solid-color copies drift in slow loops and add together ("screen") with the
     main text, so the letters smear into magenta / cyan / yellow fringes. */
  .verse.ghost{
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    mix-blend-mode:screen; opacity:.85;
  }
  .verse.g1{ color:#ff2bd6; animation: orbitA 7s ease-in-out infinite, hueSpin 9s linear infinite; }
  .verse.g2{ color:#00f0ff; animation: orbitB 9s ease-in-out infinite, hueSpin 11s linear infinite reverse; }
  @keyframes orbitA{ 0%,100%{ transform:translate(-5px, 3px); } 50%{ transform:translate(6px,-4px); } }
  @keyframes orbitB{ 0%,100%{ transform:translate(5px,-3px); }  50%{ transform:translate(-6px, 4px); } }

  .dots{ white-space:pre; }   /* the loading "..." (JS adds one dot at a time and loops until the fade) */

  /* ---------- GLOW LAYER (over the pieces) ----------
     Present from the start but invisible; it fades in so it is fully on the instant the puzzle closes.
     The glow is static (cached by the browser); only its hue slowly rotates. */
  .verse-wrap.top{ z-index:3; pointer-events:none; opacity:0; }
  #loader.covered .verse-wrap.top{ opacity:1; transition:opacity .9s ease; }
  #loader.covered .verse-wrap:not(.top){ opacity:0; transition:opacity 1s ease .4s; }   /* hand-off, no gap */

  .verse-wrap.bloom{ animation: hueSpin 8s linear infinite; }
  .verse-wrap.bloom::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 70% 38% at 50% 50%,
      rgba(255,250,230,.65), rgba(255,170,230,.32) 40%, transparent 72%);
  }
  .verse.bloomtxt{
    background:none; -webkit-background-clip:border-box; background-clip:border-box;
    color:transparent; animation:none;
    text-shadow:
      0 0 6px #fff, 0 0 12px #fff, 0 0 24px #fff4c4,
      0 0 46px #ff5fd0, 0 0 80px #ff5fd0, 0 0 130px #00e5ff;
  }
  /* brighter, lighter version of the main text for sitting on the metal */
  .verse.glow-top{
    background:linear-gradient(90deg,
      #ff7aa8, #ffc46a, #fffb7a, #8dffa8, #7af2ff, #a79dff, #ff7ae9, #ff7aa8);
    background-size:300% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-stroke:.8px #fff;
  }

  /* ---------- PUZZLE PIECES ----------
     The glow is drawn as a wide, soft stroke in the metal's own color (no filters, so it stays smooth). */
  #field{ position:absolute; inset:0; z-index:2; pointer-events:none; }
  .piece{ position:absolute; overflow:visible; will-change:transform,opacity; }
  /* electricity: one canvas, above the pieces and below the glowing text */
  #sparks{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
  .piece.gold  { --glow:rgba(255,190,50,.9);  --edge:#ffe9a0; }
  .piece.silver{ --glow:rgba(220,232,255,.9); --edge:#ffffff; }
  .piece .og{ stroke:var(--glow); stroke-linejoin:round; opacity:.4; }
  .piece .o { stroke:var(--edge); stroke-linejoin:round; }
  .piece .eye{ fill:#120d00; }
  .piece .detail{ fill:none; stroke:rgba(0,0,0,.55); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

  /* Accessibility: calm static version for people who ask for less motion */
  @media (prefers-reduced-motion: reduce){
    .verse, .verse-wrap.bloom{ animation:none; }
    .verse{ background:none; color:#ffe27a; }
    .verse.ghost, .verse-wrap.bloom{ display:none; }
    .verse.glow-top{ color:#fff6d6; -webkit-text-stroke:0; text-shadow:0 0 16px #fff4c4; }
  }

  /* ---------- COLOURS: change the metals once, here ---------- */
  :root{
    --gold-hi:#fff3c0; --gold:#f0bd3c; --gold-lo:#b98512;
    --silver:#e3e9f6;  --silver-lo:#9aa6bd;
    --nav-h:clamp(3.4rem, 8vw, 4.4rem);            /* height of the navbar */
    --nav-gap:clamp(1.2rem, 3vw, 2.6rem);  
     --nav-font:'Courier New', Courier, 'Liberation Mono', 'Nimbus Mono PS', monospace;/* space between the links */
  }
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  /* ---------- NAVBAR: transparent, sits right under the banner ----------
     It is see-through (the stars show behind it). When you scroll down it stays pinned to the top of the screen
     and gets a dark tint so the words stay readable over the page. Gold + silver: gold logo, silver links that turn
     gold, a gold-and-silver hairline. */
  .nav{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:flex-start; gap:clamp(1.5rem, 4vw, 3.5rem);
    height:var(--nav-h); padding:0 clamp(16px, 3vw, 48px);
  }
  #site .nav{ margin:0 -16px; }                                  /* full width, past the page's side padding */
  .nav::before{                                                  /* the tint that fades in on scroll (opacity only) */
    content:''; position:absolute; inset:0; z-index:-1; background:rgba(0,0,0,.8); opacity:0; transition:opacity .35s ease;
  }
  .nav.scrolled::before, .nav.open::before{ opacity:1; }
  .nav::after{                                                   /* gold -> silver -> gold hairline along the bottom edge */
    content:''; position:absolute; left:0; right:0; bottom:0; height:1px; opacity:.8;
    background:linear-gradient(90deg, transparent, var(--gold-lo) 12%, var(--gold-hi) 30%, var(--silver) 50%, var(--gold-hi) 70%, var(--gold-lo) 88%, transparent);
  }
  .nav-logo{
    font-family:'Pinyon Script','Snell Roundhand','Brush Script MT',cursive;
    font-size:clamp(1.7rem, 4.6vw, 2.3rem); line-height:1.2; font-weight:400; text-decoration:none; white-space:nowrap; padding:.1rem .1rem;
    background:radial-gradient(circle at 30% 30%, #fffdf0, #f2c850 45%, var(--gold-lo) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 8px rgba(255,200,80,.25));            /* static glow */
    -webkit-tap-highlight-color:transparent;
  }
  .nav-logo:focus-visible, .nav-toggle:focus-visible{ outline:2px solid #ffe27a; outline-offset:4px; border-radius:4px; }
  .nav-links{ display:flex; align-items:center; gap:var(--nav-gap); }
  .nav-links a{
    position:relative; padding:1rem .1rem; text-decoration:none; -webkit-tap-highlight-color:transparent;
    font:700 .8rem/1 var(--nav-font); letter-spacing:.14em; text-transform:uppercase;
    color:var(--silver); text-shadow:0 1px 8px rgba(0,0,0,.6); transition:color .25s ease;
  }
  .nav-links a::after{                                           /* gold-to-silver underline that draws in on hover / focus */
    content:''; position:absolute; left:0; right:0; bottom:.55rem; height:1px;
    background:linear-gradient(90deg, var(--gold-lo), var(--gold-hi), var(--silver));
    transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
  }
  .nav-links a + a::before{                                      /* a tiny gold diamond between the links */
    content:''; position:absolute; top:50%; left:calc(var(--nav-gap) / -2 - 2px); width:4px; height:4px;
    transform:translateY(-50%) rotate(45deg); background:var(--gold); opacity:.75;
  }
  .nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"]{ color:var(--gold-hi); }
  .nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
  .nav-links a:focus-visible{ outline:2px solid #ffe27a; outline-offset:3px; border-radius:2px; }
  .nav-toggle{                                                   /* the phone menu button (hidden on wide screens) */
    display:none; position:relative; flex:none; width:48px; height:48px; border-radius:50%; cursor:pointer;
    border:1px solid rgba(255,235,170,.45); background:rgba(0,0,0,.35); -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle span{
    position:absolute; left:14px; right:14px; height:1.5px; border-radius:1px;
    background:linear-gradient(90deg, var(--gold-hi), var(--silver)); transition:transform .3s ease;
  }
  .nav-toggle span:nth-child(1){ top:20px; }
  .nav-toggle span:nth-child(2){ top:27px; }
  .nav.open .nav-toggle span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
  @media (max-width: 760px){
    .nav-toggle{ display:block; margin-left:auto; }
    .nav-links{                                                  /* the links drop down under the bar */
      position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:.3rem 0 .8rem;
      background:rgba(0,0,0,.94); border-bottom:1px solid rgba(255,235,170,.3);
      opacity:0; visibility:hidden; transform:translateY(-8px);
      transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    }
    .nav.open .nav-links{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
    .nav-links a{ padding:1.05rem clamp(16px, 3vw, 48px); text-align:left; font-size:.88rem; }
    .nav-links a::after{ left:clamp(16px, 3vw, 48px); right:auto; width:2.4rem; bottom:.65rem; }
    .nav-links a + a::before{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .nav::before, .nav-links, .nav-links a, .nav-links a::after, .nav-toggle span{ transition:none; }
  }

  /* ---------- BANNER: 1920 x 400 ----------
     It keeps the 1920:400 shape (it is 400px tall on a 1920px-wide screen and scales down from there, but never
     below 140px or above 38% of the screen height). On a phone the sides are trimmed, so keep the important part of
     the art in the middle. Until you add your picture it shows soft gold / silver / violet light over the galaxy. */
  .banner{
    --banner-img:url("banner.png");                                 /* <- your art:  --banner-img:url("banner.jpg");   (1920 x 400) */
    position:relative; margin:0 -16px;
    height:min(clamp(140px, 20.83vw, 400px), 38vh); height:min(clamp(140px, 20.83vw, 400px), 38svh);
    background:
      var(--banner-img) center / cover no-repeat,
      radial-gradient(ellipse 42% 120% at 14% 125%, rgba(240,189,60,.5), transparent 70%),
      radial-gradient(ellipse 38% 110% at 88% -25%, rgba(190,205,255,.38), transparent 70%),
      radial-gradient(ellipse 70% 140% at 50% 135%, rgba(110,70,200,.34), transparent 70%);
    border-bottom:1px solid; border-image:linear-gradient(90deg, transparent, var(--gold-lo), var(--gold-hi), var(--silver), var(--gold-hi), var(--gold-lo), transparent) 1;
  }

  /* ---------- HOME PAGE: the figure-8 helix of designs ---------- */
  #site{
    position:relative; min-height:100vh; min-height:100svh; overflow:hidden; overflow:clip;   /* clip (not hidden) so the navbar can stick */
    background:#000; color:#fff; isolation:isolate;       /* isolate: the galaxy canvas sits behind the page content but above the black */
    padding:0 16px max(18px, env(safe-area-inset-bottom));
  }
  .helix{                                                      /* full-bleed: the 8 can use the whole screen width */
    position:relative; margin:0 -16px;
    /* the helix keeps its full, original size: one screen tall (minus the navbar and the small name line under it).
       The banner sits above it, so you scroll down from the banner to the helix. */
    height:max(240px, calc(100vh - var(--nav-h) - 3rem));
    height:max(240px, calc(100svh - var(--nav-h) - 3rem));
  }
  #helixTrace{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
  /* the galaxy: starfield, orbit rings, dust and comet trails, drawn on one canvas behind everything */
  #galaxy{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:0; transition:opacity 1.8s ease .2s; }
  #galaxy.on{ opacity:1; }
  #helixPath{ stroke:rgba(255,226,140,.3); stroke-width:1.2; stroke-linejoin:round; }
  #helixStage{
    position:absolute; inset:0; cursor:grab;
    touch-action:none;                                   /* a finger drags the helix instead of scrolling the page */
    user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
  }
  #helixStage:active{ cursor:grabbing; }
  /* ---------- the two captions around the helix ----------
     Wide screens: "Our Latest Creations" sits to the left of the 8 and "With Love, The Universe and I" to the right,
     in the space the 8 leaves free (JS sets --side to that width). Phones and tablets: they sit in a band above and
     below the 8 instead. Text only, no filters that move, so it costs nothing; the little stars twinkle with
     transform + opacity only. */
  .tag{
    position:absolute; z-index:1; pointer-events:none;                      /* decoration: never gets in the way of a drag */
    top:0; bottom:0; height:max-content; margin-block:auto;                 /* centred beside the 8 */
    width:max(9rem, calc(var(--side, 18vw) - clamp(14px, 2.2vw, 40px) - 1.5rem));
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4em;
    text-align:center; text-wrap:balance;
    font-family:'Mystery Quest','Pinyon Script','Snell Roundhand','Brush Script MT',cursive; font-weight:400;
    font-size:clamp(1.5rem, 3.4vw, 4.2rem); line-height:1.15; letter-spacing:.02em;
  }
  .tag-l{ left:clamp(14px, 2.2vw, 40px); }
  .tag-r{ right:clamp(14px, 2.2vw, 40px); }
  .tag-t{                                                                   /* moonlight silver melting into gold */
    color:transparent; -webkit-background-clip:text; background-clip:text;
    filter:drop-shadow(0 0 9px rgba(255,205,110,.38));                      /* static glow, painted once */
  }
  .tag-l .tag-t{ background-image:linear-gradient(105deg,#ffffff 0%,#e3e9f6 28%,#f7dd8c 62%,#f0bd3c 100%); }
  .tag-r .tag-t{ background-image:linear-gradient(105deg,#f0bd3c 0%,#f7dd8c 38%,#e3e9f6 72%,#ffffff 100%); }
  .tag::before, .tag::after{                                                /* two little four-point stars */
    content:''; flex:none; width:.5em; height:.5em;
    background:linear-gradient(135deg,#fffaf0,#f2c850);
    clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
    animation:twinkle 3.8s ease-in-out infinite;
  }
  .tag::after{ width:.34em; height:.34em; animation-delay:-1.9s; }
  @keyframes twinkle{ 0%,100%{ opacity:.4; transform:scale(.7) rotate(0deg); } 50%{ opacity:1; transform:scale(1.12) rotate(25deg); } }
  .helix.on .tag{ animation:tagIn 1.8s ease .55s both; }                    /* fade in as the loader fades out */
  @keyframes tagIn{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){
    .tag::before, .tag::after{ animation:none; opacity:.95; }
    .helix.on .tag{ animation:none; }
  }
  /* Phones and tablets (portrait, or up to 1024px wide and tall enough): captions go in a band above and below the 8 */
  @media (max-aspect-ratio: 1/1), (max-width: 1024px) and (min-height: 600px){
    .helix{ --band:clamp(2.5rem, 9vw, 3.7rem); }
    #helixStage{ inset:var(--band) 0; }
    #helixTrace{ top:var(--band); height:calc(100% - 2 * var(--band)); }
    .tag{
      left:0; right:0; width:auto; height:var(--band); margin:0; padding:0 14px;
      flex-direction:row; gap:.55em; font-size:clamp(1.3rem, 5.6vw, 2.6rem);
    }
    .tag-l{ top:0; bottom:auto; }
    .tag-r{ top:auto; bottom:0; }
  }
  .card{
    position:absolute; left:0; top:0; display:block; border-radius:10px;
    will-change:transform,opacity; -webkit-user-drag:none; outline-offset:4px;
  }
  .card:focus-visible{ outline:2px solid #ffe27a; }
  .face{
    position:relative; width:100%; height:100%; border-radius:10px; overflow:hidden; background:#111; opacity:0;
    border:1px solid rgba(255,235,170,.38);
    box-shadow:0 0 14px rgba(255,200,80,.2), 0 6px 18px rgba(0,0,0,.7);
  }
  .face img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; }
  .face .ph{
    position:absolute; inset:0; display:grid; place-items:end center; padding:10px;
    font:500 .68rem/1.1 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.9);
  }
  .in .face{ animation:pop .9s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 70ms + 250ms); }
  @keyframes pop{ from{ opacity:0; transform:scale(.4) rotate(-12deg); } to{ opacity:1; transform:none; } }
  .cap{
    text-align:center; min-height:1.3em; margin:.3rem 0 .9rem;
    font:500 .76rem/1.3 system-ui,sans-serif; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,235,190,.85);
  }
  @media (prefers-reduced-motion: reduce){ .face{ opacity:1; animation:none !important; } }

  /* ---------- INNER PAGES (shop.html, blog.html, about.html, contact.html) ----------
     These pages use the same navbar and this same file. See page-template.html. */
  .page{ min-height:100vh; min-height:100svh; background:#000; color:#fff;
    padding:2.5rem clamp(16px, 4vw, 48px) 4rem; }
  .page-wrap{ min-height:100vh; min-height:100svh; background:#000; }   /* holds the navbar + page so the navbar can stay pinned */
  .page-in{ max-width:56rem; margin:0 auto; }
  .page h1{
    font-family:'Pinyon Script','Snell Roundhand','Brush Script MT',cursive; font-weight:400;
    font-size:clamp(2.4rem, 7vw, 4rem); line-height:1.2; margin-bottom:1rem; padding-bottom:.1em;
    background:radial-gradient(circle at 30% 30%, #fffdf0, #f2c850 45%, var(--gold-lo) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .page p{ font:400 1rem/1.7 system-ui,sans-serif; color:rgba(255,255,255,.82); max-width:42rem; margin-bottom:1rem; }

  /* ---------- the pop-up that a tapped design zooms into ---------- */
  .viewer{
    position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
    background:rgba(0,0,0,0); visibility:hidden;
    transition:background .35s ease, visibility 0s linear .35s;
  }
  .viewer.open{ background:rgba(0,0,0,.96); visibility:visible; transition:background .35s ease; }
  .vwrap{
    display:flex; flex-direction:column; align-items:center; gap:16px;
    padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    --vw:min(92vw, calc((100vh - 170px) / 1.25), 560px);
    --vw:min(92vw, calc((100svh - 170px) / 1.25), 560px);
  }
  .vcard{
    position:relative; width:var(--vw); height:calc(var(--vw) * 1.25); border-radius:14px; overflow:hidden; background:#111;
    border:1px solid rgba(255,235,170,.55); box-shadow:0 0 44px rgba(255,200,80,.28), 0 20px 60px rgba(0,0,0,.8);
    will-change:transform;
  }
  .vcard img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; }
  .vcard .ph{
    position:absolute; inset:0; display:grid; place-items:end center; padding:20px;
    font:500 1rem/1.1 system-ui,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.92);
  }
  .vmeta{ text-align:center; opacity:0; transition:opacity .3s ease; }
  .viewer.open .vmeta{ opacity:1; transition-delay:.2s; }
  .vtitle{ margin-bottom:12px; font:500 .86rem/1.3 system-ui,sans-serif; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,235,190,.92); }
  .vlink{
    min-height:48px; display:inline-grid; place-items:center; padding:0 1.7rem; border-radius:999px;
    font:600 .82rem/1 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
    color:#2a1c00; background:linear-gradient(135deg,#fff3c0,#e6b83a 55%,#b98512);
  }
  .vlink:focus-visible, .vclose:focus-visible{ outline:2px solid #ffe27a; outline-offset:3px; }
  .vclose{
    position:absolute; top:max(12px, env(safe-area-inset-top)); right:12px; width:48px; height:48px; border-radius:50%;
    border:1px solid rgba(255,235,170,.55); background:rgba(0,0,0,.55); color:#fff; font:400 1.7rem/1 system-ui,sans-serif; cursor:pointer;
  }