/*
Theme Name: Stoner Shenanigans
Theme URI: https://stonershenanigans.com
Author: Stoner Shenanigans
Author URI: https://stonershenanigans.com
Description: A minimal custom WordPress theme for Stoner Shenanigans, a cannabis content studio. Built from a Tailwind CSS source design. Uses the Tailwind CDN for utilities + brand custom CSS for animations, brick textures, neon glow, and reveal-on-scroll. Designed to be lightweight (no Elementor, no OceanWP) and visually identical to the Tailwind source.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: All rights reserved
License URI:
Text Domain: stoner-shenanigans
Tags: cannabis, dark, custom-theme, tailwind
*/

/* =================================================================== */
/* Custom CSS extracted from v1.html (animations, textures, brick bg). */
/* Tailwind utility classes are loaded separately via the CDN script.  */
/* =================================================================== */

html { scroll-behavior: smooth; }
  body { background:#0A0A0A; color:#fff; font-family:'Baloo 2',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }

  /* Reveal-on-scroll (SeeNoEvil-style word entrance) */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.2,.8,.2,1), transform 900ms cubic-bezier(.2,.8,.2,1); }
  .reveal.in { opacity: 1; transform: translateY(0); }
  .reveal.delay-1 { transition-delay: 140ms; }
  .reveal.delay-2 { transition-delay: 280ms; }
  .reveal.delay-3 { transition-delay: 420ms; }

  /* Subtle scroll indicator nudge */
  @keyframes nudge { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(8px); opacity: .5; } }
  .nudge { animation: nudge 1.8s ease-in-out infinite; }

  /* Client logo marquee — opposite direction loops, slow-to-medium pace */
  @keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  .marquee-track { display: flex; width: max-content; }
  .marquee-left  { animation: scroll-left  110s linear infinite; }
  .marquee-right { animation: scroll-right 110s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .marquee-left,.marquee-right { animation: none; } }

  /* Faded edges on the marquee so logos drift in/out softly */
  .marquee-fade {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }

  .logo-card { transition: transform 220ms, opacity 220ms; opacity: 0.7; }
  .logo-card:hover { opacity: 1; transform: scale(1.06); }

  /* Hide native scrollbar on horizontal carousels (used by blog section on mobile/tablet) */
  .scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
  .scrollbar-hide::-webkit-scrollbar { display: none; }


  /* Brick texture (uses client asset)
     - background-size: 100% auto + repeat-y → bricks render at the
       SAME visual scale across every brick section, regardless of
       the section's height (cover would scale them differently per
       section).
     - Vignette + top/bottom feather still applied so brick sinks
       into the page bg instead of looking like a hard tile.         */
  .brick-bg {
    position: relative;
    background-image: url('assets/brick/brick.jpg');
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center top;
    background-color: #0A0A0A;
  }
  .brick-bg::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    /* radial vignette + top/bottom feather to bg color */
    background:
      radial-gradient(ellipse 130% 90% at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.85) 70%, #0A0A0A 100%),
      linear-gradient(180deg, #0A0A0A 0%, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 82%, #0A0A0A 100%);
  }
  /* Modifier: drop the bottom feather so brick flows into the next section */
  .brick-bg.no-bottom-feather::before {
    background:
      radial-gradient(ellipse 130% 90% at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.85) 70%, rgba(10,10,10,0) 100%),
      linear-gradient(180deg, #0A0A0A 0%, rgba(10,10,10,0) 18%, rgba(10,10,10,0) 100%);
  }
  /* Modifier: drop the top feather so brick continues from the prior section */
  .brick-bg.no-top-feather::before {
    background:
      radial-gradient(ellipse 130% 90% at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.85) 70%, rgba(10,10,10,0) 100%),
      linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0) 82%, #0A0A0A 100%);
  }
  .brick-bg > * { position: relative; z-index: 1; }