/*
Theme Name: Anti-Current Co.
Theme URI: https://www.anticurrentco.com/
Author: Anti-Current Co.
Author URI: https://www.anticurrentco.com/
Description: Custom WordPress theme for Anti-Current Co. — Tamraght & Taghazout surf streetwear. Converted 1:1 from the original static HTML/Tailwind design, with WooCommerce support.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anti-current-co
Tags: e-commerce, woocommerce, custom-background, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   This stylesheet preserves the exact CSS from the original static site,
   unchanged, so layout/colors/fonts/animations/responsiveness stay identical.
   Tailwind utility classes are loaded via the Tailwind CDN script in
   header.php (same as the original site) — no build step required.
   ========================================================================== */

/* ---- Critical above-fold CSS (was inline <style> in <head>) ---- */
  html{font-family:Inter,sans-serif;background:#0D0C0A;color:#EFE8D8}
  header{height:4rem}
  h1,h2{font-family:Anton,sans-serif;text-transform:uppercase}

/* ---- Main site CSS (was inline <style> in <head>) ---- */
  html { scroll-behavior: smooth; }
  body { background-color: #0D0C0A; position: relative; }

  ::selection { background: #B5502C; color: #EFE8D8; }

  .eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.25em;
    text-transform: uppercase;
  }

  .stamp-text {
    font-family: 'Special Elite', monospace;
  }

  /* ============ LAYERED CINEMATIC BACKGROUND ============ */
  /* Film grain — fine, fast-shifting */
  .grain {
    position: fixed; inset: 0; pointer-events: none; z-index: 60;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* Coarser concrete/paper grain — slower, larger, tinted sand */
  .grain-coarse {
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    opacity: 0.05; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  }
  /* Soft vignette to pull focus inward, cinematic framing */
  .vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 2;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
  }
  /* Analog scanline imperfection, very faint */
  .scanlines {
    position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.03;
    background-image: repeating-linear-gradient(to bottom, rgba(239,232,216,0.6) 0px, rgba(239,232,216,0.6) 1px, transparent 1px, transparent 3px);
  }

  /* ============ SCROLL REVEAL ============ */
  .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* ============ LETTER-BY-LETTER HEADLINE REVEAL ============ */
  .letter-reveal { display: inline-block; overflow: hidden; }
  .letter-reveal .lr-inner {
    display: inline-block; opacity: 0; transform: translateY(110%) rotate(4deg);
    transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.85s cubic-bezier(.16,1,.3,1);
  }
  .letter-reveal.show .lr-inner { opacity: 1; transform: translateY(0) rotate(0); }

  /* ============ MAGNETIC BUTTONS ============ */
  .magnetic { transition: transform 0.25s cubic-bezier(.16,1,.3,1); will-change: transform; }

  /* ============ NAV BLUR ON SCROLL ============ */
  header { transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease; }
  header.nav-scrolled { background-color: rgba(13,12,10,0.92); backdrop-filter: blur(16px); border-color: rgba(239,232,216,0.18); }

  /* Rotating logo badge */
  .rotate-slow { animation: spin 26s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .rotate-slower { animation: spin 60s linear infinite reverse; }

  /* Floating oversized tee — hero centerpiece */
  .float-tee { animation: floatTee 7s ease-in-out infinite; }
  @keyframes floatTee {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-20px) rotate(1.5deg); }
  }

  /* Abstract ocean current lines */
  .current-line { stroke-dasharray: 10 8; animation: currentFlow 7s linear infinite; }
  @keyframes currentFlow { to { stroke-dashoffset: -180; } }

  /* Dust / grain particles drifting in the hero */
  .dust { position: absolute; border-radius: 9999px; background: rgba(239,232,216,0.5); pointer-events: none; animation: dustDrift linear infinite; }
  @keyframes dustDrift {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.5; }
    90%  { opacity: 0.3; }
    100% { transform: translateY(-140px) translateX(12px); opacity: 0; }
  }

  /* Marquee announcement bar */
  .marquee-track {
    display: flex; width: max-content;
    animation: marquee 30s linear infinite;
  }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Live pulse dot */
  .pulse-dot { position: relative; }
  .pulse-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 9999px;
    background: currentColor; opacity: 0.6;
    animation: pulseRing 1.8s ease-out infinite;
  }
  @keyframes pulseRing {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; }
  }

  /* Tide-line signature divider (swell graph) */
  .tideline-wrap { overflow: hidden; width: 100%; line-height: 0; }
  .tideline-track {
    display: flex; width: max-content;
    animation: tideScroll 14s linear infinite;
  }
  @keyframes tideScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Watermark overlay for sticker/postcard imagery */
  .watermark {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    align-content: center; justify-items: center; transform: rotate(-24deg) scale(1.4);
  }
  .watermark span {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em;
    color: rgba(239,232,216,0.55); text-transform: uppercase; white-space: nowrap;
    text-shadow: 0 0 6px rgba(0,0,0,0.6);
  }
  /* Denser coverage for the multi-design sheet previews — more repeats, tighter grid */
  .watermark-dense {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    transform: rotate(-24deg) scale(1.7);
  }
  .watermark-dense span {
    font-size: 0.6rem;
    color: rgba(239,232,216,0.65);
  }

  .card-hover { transition: border-color .4s ease; }
  .card-hover:hover { border-color: rgba(201,168,118,0.4); }
  .card-hover .card-img { transition: transform 0.8s cubic-bezier(.16,1,.3,1); }
  .card-hover:hover .card-img { transform: scale(1.045); }

  .quickview-trigger { cursor: zoom-in; }

  input, select, textarea { background: transparent; }
  input::placeholder, textarea::placeholder { color: rgba(239,232,216,0.35); }

  .no-scrollbar::-webkit-scrollbar { display: none; }

  #quickview-modal { transition: opacity .25s ease; }

/* ---- WooCommerce baseline compatibility ----
   Keeps default WooCommerce markup from clashing with the dark theme.
   No layout/design changes to the original site — this only styles
   WooCommerce's own generated markup (shop/product/cart templates)
   using the same color tokens as the rest of the site. */
.woocommerce,
.woocommerce-page {
  color: #EFE8D8;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: #C9A876;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  background-color: #EFE8D8;
  color: #0D0C0A;
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 0.75rem 1.25rem;
  border: none;
  transition: background-color .3s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: #C9A876;
  color: #0D0C0A;
}
.woocommerce nav.woocommerce-pagination ul,
.woocommerce ul.products,
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce table.shop_table,
.woocommerce #reviews #comments ol.commentlist li .comment-text,
.woocommerce-checkout table.shop_table,
.woocommerce-cart table.shop_table {
  background-color: transparent;
  border-color: rgba(239,232,216,0.14);
  color: #EFE8D8;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border-color: rgba(239,232,216,0.14);
}
.woocommerce .quantity input.qty,
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  background: transparent;
  color: #EFE8D8;
  border: 1px solid rgba(239,232,216,0.25);
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: #151310;
  border-top-color: #C9A876;
  color: #EFE8D8;
}
