/* Valen Valen — shared design system: tokens, base, buttons, nav, product card, footer, motion.
   Loaded on every page. Page-specific sections (Hero, Shop filters, etc.) live in that page's
   own <style> block so this file stays generic across Home, Shop, and future pages. */

:root{
  --bg:#FFFFFF;
  --bg-alt:#F7F7F7;
  --surface:#FFFFFF;
  --ink:#0D0D0D;
  --text:#0D0D0D;
  --text-secondary:#6B6B6B;
  --border:#E5E5E5;
  --accent:#E8536B;
  --accent-hover:#C93E56;
  --accent-soft:#FFF1F3;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --fs-hero:clamp(2.5rem,6vw,6rem);
  --fs-h2:clamp(2rem,4.2vw,3.5rem);
  --fs-h3:clamp(1.25rem,2vw,1.6rem);
  --radius:4px;
  --nav-h:64px;
  --announcement-h:38px;
}
@media(min-width:1024px){ :root{ --nav-h:72px; } }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent-soft); color:var(--accent-hover); }

h1,h2,h3{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0;
  line-height:1.02;
}
p{ margin:0; line-height:1.6; color:var(--text-secondary); }
.eyebrow{
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:0 0 .55rem;
}

.wrap{ max-width:1280px; margin:0 auto; padding:0 clamp(20px,4vw,56px); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
  border-radius:var(--radius); padding:14px 28px; border:1.5px solid transparent;
  transition:background .15s,color .15s,border-color .15s; white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-secondary{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-secondary:hover{ background:var(--ink); color:#fff; }
.btn-ghost-onlight{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-ghost-onlight:hover{ border-color:var(--ink); }

.quick-add{
  width:100%; margin-top:10px; background:var(--bg); border:1.5px solid var(--ink);
  color:var(--ink); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:11px; border-radius:var(--radius); transition:background .15s,color .15s;
}
.quick-add:hover{ background:var(--ink); color:#fff; }
.quick-add.added{ background:var(--accent); border-color:var(--accent); color:#fff; }

.link-arrow{ font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--ink); padding-bottom:2px; }
.link-arrow:hover{ border-color:var(--accent); color:var(--accent-hover); }

/* ---- announcement ---- */
.top-stack{ position:relative; }
.announcement{ height:var(--announcement-h); display:flex; align-items:center; justify-content:center; gap:var(--space-4); background:var(--ink); color:#fff; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.announcement-arrow{ background:none; border:none; color:#fff; opacity:.55; font-size:.9rem; line-height:1; padding:4px; }
.announcement-arrow:hover{ opacity:1; }

/* ---- navbar ---- */
/* Always solid — sits in normal flow right after the announcement bar, then sticks to the
   viewport top once you scroll past it. Lives as a sibling of .hero (on Home) rather than
   nested inside it: overflow:hidden ancestors clip position:sticky/fixed descendants instead
   of letting them pin to the viewport. */
header.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; background:var(--bg); color:var(--text);
  border-bottom:1px solid var(--border);
}
.nav-row{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; }
.nav-left,.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-right{ justify-self:end; grid-column:3; }
.nav-links a{ font-size:.82rem; font-weight:500; letter-spacing:.02em; padding-bottom:4px; border-bottom:1px solid transparent; }
.nav-links a.active{ border-color:var(--accent); }
.nav-links{ display:none; gap:22px; }
@media(min-width:768px){ .nav-links{ display:flex; } }
@media(max-width:767px){
  /* Always in the DOM as display:flex (not display:none) so the open/close toggle can
     actually transition — display isn't animatable, opacity/transform are. Kept out of the
     way when closed via pointer-events + a slight upward offset instead. */
  .nav-links{
    display:flex; flex-direction:column; position:absolute; top:var(--nav-h); left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--border); padding:18px 20px; gap:16px; z-index:49;
    opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease;
  }
  .nav-links.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-links a{ font-size:.95rem; }
}
.wordmark{ font-family:'Archivo'; font-weight:900; font-size:1.15rem; letter-spacing:.02em; text-transform:uppercase; display:flex; align-items:center; flex-shrink:0; }

/* logo-wordmark.png is white artwork on transparent — the nav is always solid white,
   so it needs to invert to black to stay visible (white-on-white otherwise). */
.nav-logo{ height:30px; width:auto; object-fit:contain; filter:invert(1); }
/* The wordmark is wide relative to its height (~4.7:1) — at narrow phone widths the fixed
   30px size runs into the search/account/bag icons on the right, since neither side of the
   nav shrinks its content. Scale it down before that happens; the icons and hamburger stay
   fixed-size since they're already small enough not to collide at any real phone width. */
@media(max-width:420px){ .nav-logo{ height:22px; } }
@media(max-width:340px){ .nav-logo{ height:17px; } }
@media(min-width:1024px){ .nav-logo{ height:36px; } }
.icon-btn{ background:none; border:none; padding:6px; display:flex; color:inherit; position:relative; }
.icon-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; }
.bag-count{
  position:absolute; top:-2px; right:-2px; background:var(--accent); color:#fff;
  font-size:.62rem; font-weight:700; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; transform:scale(0); transition:transform .2s ease;
}
.bag-count.show{ transform:scale(1); }
.hamburger{ display:flex; background:none; border:none; padding:6px; }
.hamburger svg{ width:22px; height:22px; }
@media(min-width:768px){ .hamburger{ display:none; } }
.nav-left .hamburger-wrap{ display:flex; align-items:center; }

/* ---- sections ---- */
section{ border-bottom:1px solid var(--border); }
.section-pad{ padding:var(--space-8) 0; }
@media(min-width:1024px){ .section-pad{ padding:var(--space-9) 0; } }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:var(--space-6); flex-wrap:wrap; }

/* ---- garment art (placeholder, no photography yet) ---- */
.garment-tile{ position:relative; background:var(--bg-alt); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.on-dark .garment-tile{ background:#171717; }
.detail-icon{ stroke:var(--text-secondary); fill:none; opacity:.6; }

/* ---- product grid + card (shared component — Home and Shop use the exact same one) ---- */
.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
@media(min-width:768px){ .product-grid{ grid-template-columns:repeat(4,1fr); gap:var(--space-5); } }
.product-grid.carousel{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:var(--space-3); margin:0 calc(-1 * clamp(20px,4vw,56px)); padding:0 clamp(20px,4vw,56px) 6px; }
@media(min-width:768px){ .product-grid.carousel{ display:grid; margin:0; padding:0; overflow:visible; } }
.product-card{ scroll-snap-align:center; flex:0 0 88%; max-width:320px; }
@media(min-width:768px){ .product-card{ flex:none; max-width:none; } }
.product-card-link{ display:block; }
.product-art{ aspect-ratio:3/4; margin-bottom:var(--space-3); }
.product-art .badge{ position:absolute; top:10px; left:10px; }
.product-name{ font-size:.88rem; font-weight:600; margin-bottom:2px; }
.product-price{ font-size:.86rem; color:var(--text-secondary); }
.color-dots{ display:flex; gap:6px; margin-top:8px; }
.color-dots span{ width:12px; height:12px; border-radius:50%; border:1px solid var(--border); }

/* ---- size selector (Product Page) ---- */
.size-chip{
  min-width:44px; height:40px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); border-radius:var(--radius); font-size:.8rem; font-weight:600;
  background:var(--bg); color:var(--text); position:relative;
}
.size-chip.active{ border-color:var(--ink); }
.size-chip.oos{ color:var(--text-secondary); background:var(--bg-alt); }
.size-chip.oos::after{ content:""; position:absolute; left:6px; right:6px; top:50%; height:1px; background:var(--text-secondary); transform:rotate(-12deg); }

.badge{ display:inline-flex; font-size:.64rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:4px 9px; border-radius:99px; background:var(--accent-soft); color:var(--accent-hover); }

/* ---- footer ---- */
footer{ background:var(--ink); color:#D9D9D9; }
.footer-top{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6) var(--space-4); padding:var(--space-8) 0 var(--space-6); }
/* Brand block and Compañía (the 4th div in source order — see the shared.css comment at its
   rule below) each span both columns; Tienda and Ayuda sit side by side between them instead
   of stacking into one long scroll. */
.footer-brand{ grid-column:1/-1; text-align:center; }
.footer-col:nth-of-type(4){ grid-column:1/-1; text-align:center; }
.footer-col:nth-of-type(4) ul{ align-items:center; }
.footer-col:nth-of-type(2),.footer-col:nth-of-type(3){ margin-left:5%; }
@media(min-width:768px){
  .footer-top{ grid-template-columns:1.4fr repeat(3,1fr); gap:var(--space-5); }
  .footer-brand{ text-align:left; }
  .footer-col:nth-of-type(4){ grid-column:auto; text-align:left; }
  .footer-col:nth-of-type(4) ul{ align-items:flex-start; }
  .footer-col:nth-of-type(2),.footer-col:nth-of-type(3){ margin-left:0; }
}
/* Images reset to display:block sitewide, so text-align:center on .footer-brand doesn't
   center this — needs its own margin:auto. */
.footer-signature{ width:131px; height:131px; border-radius:50%; margin:0 auto var(--space-3); }
@media(min-width:768px){ .footer-signature{ margin:0 0 var(--space-3); } }
.footer-tagline{ font-size:.78rem; color:#8C8C8C; margin-top:10px; letter-spacing:.02em; }
.footer-col b{ display:block; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:#8C8C8C; margin-bottom:var(--space-3); }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.86rem; color:#D9D9D9; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ border-top:1px solid #262626; padding:var(--space-4) 0; display:flex; flex-direction:column; gap:12px; justify-content:space-between; align-items:center; font-size:.76rem; color:#7A7A7A; }
@media(min-width:768px){ .footer-bottom{ flex-direction:row; } }
.footer-social{ display:flex; gap:14px; }
.footer-social svg{ width:18px; height:18px; stroke:#D9D9D9; fill:none; stroke-width:1.4; }

/* ---- cart drawer (shared across every page — injected by VV.injectCartDrawer) ---- */
.cart-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:89; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.cart-scrim.show{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:100%; max-width:440px; background:var(--bg);
  z-index:90; transform:translateX(100%); transition:transform .3s ease;
  display:flex; flex-direction:column; box-shadow:-10px 0 30px rgba(0,0,0,.15);
}
.cart-drawer.open{ transform:translateX(0); }
@media(max-width:640px){
  .cart-drawer{
    max-width:100%; top:auto; height:88vh;
    transform:translateY(100%); border-top-left-radius:16px; border-top-right-radius:16px;
  }
  .cart-drawer.open{ transform:translateY(0); }
}
.cart-drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:var(--space-5); border-bottom:1px solid var(--border); flex-shrink:0; }
.cart-drawer-head b{ font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; }
.cart-drawer-body{ flex:1; overflow-y:auto; padding:var(--space-5); }
.cart-drawer-foot{ border-top:1px solid var(--border); padding:var(--space-5); flex-shrink:0; }
.cart-subtotal-row{ display:flex; justify-content:space-between; font-size:.92rem; font-weight:600; margin-bottom:var(--space-4); }
.cart-empty{ text-align:center; padding:var(--space-9) var(--space-3); }

.cart-item{ display:flex; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--border); }
.cart-item:last-child{ border-bottom:none; }
.cart-item-art{ width:76px; aspect-ratio:3/4; flex-shrink:0; }
.cart-item-info{ flex:1; display:flex; flex-direction:column; min-width:0; }
.cart-item-name{ font-size:.86rem; font-weight:600; }
.cart-item-meta{ font-size:.76rem; color:var(--text-secondary); margin-top:2px; }
.cart-item-row{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:10px; }
.cart-item-remove{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); border-bottom:1px solid var(--text-secondary); background:none; flex-shrink:0; }

.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:var(--radius); }
.qty-stepper button{ width:26px; height:26px; background:none; border:none; font-size:.9rem; color:var(--text); }
.qty-stepper span{ min-width:20px; text-align:center; font-size:.8rem; }

.shipping-progress{ background:var(--accent-soft); border-radius:var(--radius); padding:var(--space-4); margin-bottom:var(--space-5); font-size:.8rem; color:var(--accent-hover); font-weight:600; }
.shipping-progress-bar{ height:4px; background:#fff; border-radius:99px; margin-top:8px; overflow:hidden; }
.shipping-progress-fill{ height:100%; background:var(--accent); transition:width .3s ease; }
.shipping-progress-labels{ display:flex; justify-content:space-between; font-size:.68rem; color:var(--text-secondary); margin-top:4px; font-weight:400; }

.drawer-close{ background:none; border:none; font-size:1.4rem; line-height:1; color:var(--text); }

/* ---- generic modal scrim + size guide modal (shared across every page —
   injected by VV.injectSizeGuideModal) ---- */
.modal-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:94; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.modal-scrim.show{ opacity:1; pointer-events:auto; }
.size-guide-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-48%); width:min(640px,92vw); max-height:82vh;
  background:var(--bg); border-radius:var(--radius); z-index:95; box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.size-guide-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.sg-modal-head{ display:flex; justify-content:space-between; align-items:center; padding:var(--space-5) var(--space-6) var(--space-4); flex-shrink:0; }
.sg-modal-head h2{ font-size:1.15rem; margin:0; }
.sg-modal-toolbar{ padding:0 var(--space-6) var(--space-4); flex-shrink:0; }
.sg-unit-toggle{ display:inline-flex; border:1.5px solid var(--ink); border-radius:99px; overflow:hidden; }
.sg-unit-toggle button{ padding:6px 18px; font-size:.78rem; font-weight:700; background:var(--bg); color:var(--text); border:none; }
.sg-unit-toggle button.active{ background:var(--ink); color:#fff; }
.sg-modal-body{ flex:1; overflow-y:auto; padding:0 var(--space-6) var(--space-6); }
.sg-modal-section{ margin-bottom:var(--space-6); }
.sg-modal-section:last-child{ margin-bottom:0; }
.sg-modal-section h3{ font-size:.92rem; margin-bottom:var(--space-3); }
.sg-modal-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
.sg-modal-table{ width:100%; border-collapse:collapse; font-size:.84rem; white-space:nowrap; }
.sg-modal-table th, .sg-modal-table td{ padding:10px 14px; text-align:left; border-bottom:1px solid var(--border); }
.sg-modal-table thead th{ background:var(--bg-alt); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary); font-weight:600; }
.sg-modal-table tbody tr:last-child td{ border-bottom:none; }
.sg-modal-table td:first-child{ font-family:'Archivo'; font-weight:800; color:var(--text); }
@media(max-width:640px){
  .size-guide-modal{
    width:100%; max-width:100%; max-height:88vh; top:auto; bottom:0; left:0;
    transform:translateY(100%); border-radius:16px 16px 0 0;
  }
  .size-guide-modal.open{ transform:translateY(0); }
}

/* ---- video modal: a product's video plays here instead of fighting for a gallery slot ---- */
.pdp-video-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:var(--space-3);
  font-size:.82rem; font-weight:600; color:var(--text); background:none; border:none; cursor:pointer; padding:0;
}
.pdp-video-link svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6; }
.video-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-48%); width:min(420px,92vw); max-height:86vh;
  background:#000; border-radius:var(--radius); z-index:95; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.video-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.video-modal video{ display:block; width:100%; max-height:86vh; }
.video-modal-close{
  position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; border:none; font-size:1.2rem; line-height:1; cursor:pointer;
}

/* ---- legal template (shared across Privacy/Terms/Returns/Shipping/Cookies) ---- */
.legal-header{ text-align:center; padding:var(--space-9) 0 var(--space-7); }
.legal-header h1{ font-size:clamp(2.4rem,6vw,3.6rem); }
.legal-header p{ margin:var(--space-3) auto 0; max-width:44ch; }

.legal-layout{ display:block; padding-bottom:var(--space-9); }
@media(min-width:900px){ .legal-layout{ display:grid; grid-template-columns:200px 1fr; gap:var(--space-8); align-items:start; } }

.legal-sidebar{ display:none; }
@media(min-width:900px){
  .legal-sidebar{ display:block; position:sticky; top:calc(var(--nav-h) + var(--space-6)); }
  .legal-sidebar b{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--space-4); }
  .legal-sidebar a{ display:block; padding:8px 0; font-size:.88rem; color:var(--text-secondary); border-left:2px solid transparent; padding-left:14px; margin-left:-14px; }
  .legal-sidebar a.active{ color:var(--text); border-left-color:var(--accent); font-weight:600; }
  .legal-sidebar a:hover{ color:var(--text); }
}

.legal-mobile-select{ margin-bottom:var(--space-6); position:relative; }
@media(min-width:900px){ .legal-mobile-select{ display:none; } }
.legal-mobile-select select{
  width:100%; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg);
  padding:12px 36px 12px 14px; font-family:inherit; font-weight:600; font-size:.85rem; text-transform:uppercase;
  letter-spacing:.03em; color:var(--text); appearance:none; cursor:pointer;
}
.legal-mobile-select::after{
  content:""; position:absolute; right:16px; top:50%; width:9px; height:9px;
  border-right:1.5px solid var(--text-secondary); border-bottom:1.5px solid var(--text-secondary);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}

.legal-content{ max-width:720px; }
.legal-content .doc-title{ font-size:clamp(1.6rem,3.5vw,2.2rem); margin-bottom:6px; }
.legal-meta{ font-size:.76rem; letter-spacing:.04em; color:var(--text-secondary); text-transform:uppercase; margin-bottom:var(--space-7); }
.legal-section{ margin-bottom:var(--space-7); }
.legal-section:last-child{ margin-bottom:0; }
.legal-section-num{ font-family:'Archivo'; font-weight:800; color:var(--accent); font-size:.85rem; letter-spacing:.06em; margin-bottom:6px; }
.legal-section h3{ font-family:'Inter'; font-weight:600; font-size:1.05rem; text-transform:none; letter-spacing:0; margin-bottom:var(--space-3); }
.legal-section p{ color:var(--text); font-size:.92rem; line-height:1.75; max-width:none; }
.legal-content a{ color:var(--text); text-decoration:none; border-bottom:1px solid transparent; }
.legal-content a:hover{ border-bottom-color:var(--accent); color:var(--accent-hover); }

/* ---- motion ---- */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .35s ease-out, transform .35s ease-out; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none; opacity:1; transform:none; }
}

.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:100; }
.skip-link:focus{ left:12px; top:12px; }
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- preloader (static in <body>, shown before shared.js even loads) ----
   Cinematic timing: slow eased entrance, a held beat, then a slow eased exit —
   deliberately longer than a spinner so it reads as a moment, not a flash. */
.preloader{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:1; visibility:visible; transition:opacity .9s ease, visibility .9s ease;
}
.preloader img{
  width:clamp(138px,25vw,230px); height:auto; opacity:0; transform:scale(.86);
  animation:preloaderIntro 1.6s cubic-bezier(.16,.84,.44,1) forwards;
}
.preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader.hide img{ transform:scale(1.05); transition:transform .9s ease; }
@keyframes preloaderIntro{
  0%{ opacity:0; transform:scale(.86); }
  65%{ opacity:1; transform:scale(1.015); }
  100%{ opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .preloader{ transition:opacity .2s linear; }
  .preloader img{ animation:none; opacity:1; transform:none; }
  .preloader.hide img{ transition:none; }
}