/* =============================================================================
   OWW — INTRO TO SCOTCH / INTRO TO SPIRITS PAGE
   assets/css/page-intro.css
   Version: 3.5.3
   Scope: body.oww-page--intro OR div.oww-intro (dual-scoped for Elementor wrapper safety)
   Scope: body.oww-intro

   Covers all classes used in the INTRO_TO_SCOTCH.html Elementor widget.
   Global tokens and shared components (.oww-btn, .oww-prose etc.) are
   defined in global.css and components.css — not repeated here.
   ============================================================================= */


/* ─── SECTION RHYTHM ────────────────────────────────────────────────────── */

.oww-page--intro .oww-section,
.oww-intro .oww-section {
    position: relative;
    padding:  clamp(4rem, 9vw, 7rem) 0;
    overflow: hidden;
}

.oww-page--intro .oww-section--alt,
.oww-intro .oww-section--alt {
    background: var(--oww-bg-raised);
}

.oww-page--intro .oww-section--closing,
.oww-intro .oww-section--closing {
    background:  var(--oww-bg-mid);
    text-align:  center;
}

.oww-page--intro .oww-container--narrow,
.oww-intro .oww-container--narrow {
    max-width: 760px;
    margin:    0 auto;
    padding:   0 clamp(1.25rem, 5vw, 4rem);
}


/* ─── HERO ──────────────────────────────────────────────────────────────── */

.oww-page--intro .oww-intro__hero,
.oww-intro .oww-intro__hero,
.oww-page--intro .oww-intro .oww-hero,
.oww-intro .oww-intro .oww-hero {
    position:    relative;
    min-height:  90vh;
    display:     flex;
    align-items: center;
    background:  var(--oww-bg);
    overflow:    hidden;
}

.oww-page--intro .oww-hero__overlay,
.oww-intro .oww-hero__overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(
        105deg,
        rgba(10, 8, 6, 0.92) 0%,
        rgba(10, 8, 6, 0.58) 45%,
        rgba(10, 8, 6, 0.82) 100%
    );
    pointer-events: none;
    z-index:        1;
}

.oww-page--intro .oww-hero__vignette,
.oww-intro .oww-hero__vignette {
    position:       absolute;
    inset:          0;
    background:     radial-gradient(ellipse 90% 100% at 30% 50%, transparent 10%, rgba(10,8,6,.55) 55%, rgba(10,8,6,.92) 100%);
    pointer-events: none;
    z-index:        2;
}

.oww-page--intro .oww-hero .oww-container,
.oww-intro .oww-hero .oww-container,
.oww-page--intro .oww-hero__content,
.oww-intro .oww-hero__content {
    position:       relative;
    z-index:        5;
}

.oww-page--intro .oww-hero .oww-container,
.oww-intro .oww-hero .oww-container {
    padding-top:    clamp(5rem, 12vw, 9rem);
    padding-bottom: clamp(5rem, 12vw, 9rem);
}

.oww-page--intro .oww-hero__eyebrow,
.oww-intro .oww-hero__eyebrow {
    display:        flex;
    align-items:    center;
    gap:            0.6rem;
    font-size:      clamp(0.55rem, 1.1vw, 0.65rem);
    font-weight:    700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    margin-bottom:  0.65rem;
}

.oww-page--intro .oww-hero__eyebrow-dot,
.oww-intro .oww-hero__eyebrow-dot {
    width:         3px;
    height:        3px;
    border-radius: 50%;
    background:    var(--oww-amber);
    opacity:       0.6;
    flex-shrink:   0;
}

.oww-page--intro .oww-hero__title,
.oww-intro .oww-hero__title {
    font-size:    clamp(2.4rem, 5.5vw, 4rem);
    font-weight:  300;
    line-height:  1.04;
    color:        var(--oww-cream);
    margin-bottom: 0.4em;
    letter-spacing: -0.01em;
    max-width:    640px;
}

.oww-page--intro .oww-hero__subtitle,
.oww-intro .oww-hero__subtitle {
    font-size:    clamp(0.875rem, 1.8vw, 1rem);
    color:        var(--oww-cream-muted);
    line-height:  1.75;
    max-width:    520px;
    margin-bottom: 1.75rem;
}

.oww-page--intro .oww-hero__ctas,
.oww-intro .oww-hero__ctas {
    display:       flex;
    flex-wrap:     wrap;
    gap:           0.875rem;
    margin-bottom: 1.75rem;
}

/* Trust strip */
.oww-page--intro .oww-hero__trust,
.oww-intro .oww-hero__trust {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    align-items: center;
}

.oww-page--intro .oww-hero__trust-item,
.oww-intro .oww-hero__trust-item {
    font-size:      0.6rem;
    font-weight:    500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color:          var(--oww-cream-muted);
}

.oww-page--intro .oww-hero__trust-dot,
.oww-intro .oww-hero__trust-dot {
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    var(--oww-amber);
    opacity:       0.5;
}

/* Scroll indicator */
.oww-page--intro .oww-hero__scroll,
.oww-intro .oww-hero__scroll {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    margin-top:     2.5rem;
}

.oww-page--intro .oww-hero__scroll-text,
.oww-intro .oww-hero__scroll-text {
    font-size:      0.52rem;
    font-weight:    700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    opacity:        0.6;
}

.oww-page--intro .oww-hero__scroll-line,
.oww-intro .oww-hero__scroll-line {
    width:     1px;
    height:    28px;
    background: rgba(205, 165, 100, 0.3);
    position:  relative;
    overflow:  hidden;
}

.oww-page--intro .oww-hero__scroll-dot,
.oww-intro .oww-hero__scroll-dot {
    position:      absolute;
    top:           0;
    left:          50%;
    transform:     translateX(-50%);
    width:         3px;
    height:        8px;
    background:    var(--oww-amber);
    border-radius: 2px;
    animation:     oww-intro-scroll-dot 2s ease-in-out infinite;
}

@keyframes oww-intro-scroll-dot {
    0%, 100% { top: 0;    opacity: 1; }
    80%       { top: 20px; opacity: 0; }
    81%       { top: 0;    opacity: 0; }
}


/* ─── SECTION HEADER ────────────────────────────────────────────────────── */

.oww-page--intro .oww-section__header,
.oww-intro .oww-section__header {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.oww-page--intro .oww-section__header--center,
.oww-intro .oww-section__header--center {
    text-align: center;
    max-width:  680px;
    margin-left:  auto;
    margin-right: auto;
}

.oww-page--intro .oww-section__eyebrow,
.oww-intro .oww-section__eyebrow {
    display:        block;
    font-size:      clamp(0.55rem, 1vw, 0.65rem);
    font-weight:    700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    margin-bottom:  0.5rem;
}

.oww-page--intro .oww-section__title,
.oww-intro .oww-section__title {
    font-size:    clamp(1.8rem, 4vw, 2.8rem);
    font-weight:  300;
    color:        var(--oww-cream);
    line-height:  1.1;
    margin-bottom: 0.5rem;
}

.oww-page--intro .oww-section__intro,
.oww-intro .oww-section__intro {
    font-size:  0.95rem;
    color:      var(--oww-cream-muted);
    line-height: 1.75;
    max-width:  580px;
    margin:     0 auto;
}

.oww-page--intro .oww-section__body,
.oww-intro .oww-section__body {
    font-size:   0.9rem;
    color:       var(--oww-cream-muted);
    line-height: 1.75;
}

.oww-page--intro .oww-section__footer-note,
.oww-intro .oww-section__footer-note {
    font-size:   0.78rem;
    color:       var(--oww-cream-faint);
    line-height: 1.65;
    margin-top:  var(--oww-space-lg);
    text-align:  center;
}


/* ─── CALLOUT ───────────────────────────────────────────────────────────── */

.oww-page--intro .oww-callout,
.oww-intro .oww-callout {
    display:       flex;
    align-items:   flex-start;
    gap:           1rem;
    padding:       1.25rem 1.5rem;
    background:    rgba(205, 165, 100, 0.05);
    border:        1px solid var(--oww-bronze-30);
    border-left:   3px solid var(--oww-amber);
    border-radius: 0 var(--oww-radius-md) var(--oww-radius-md) 0;
    margin:        var(--oww-space-lg) 0;
}

.oww-page--intro .oww-callout__icon,
.oww-intro .oww-callout__icon {
    flex-shrink: 0;
    width:       36px;
    height:      36px;
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       var(--oww-amber);
    opacity:     0.8;
}

.oww-page--intro .oww-callout__icon svg,
.oww-intro .oww-callout__icon svg { width: 100%; height: 100%; }

.oww-page--intro .oww-callout__text,
.oww-intro .oww-callout__text {
    font-family: var(--oww-ff-display);
    font-style:  italic;
    font-size:   clamp(1rem, 1.8vw, 1.125rem);
    color:       var(--oww-cream);
    line-height: 1.65;
}


/* ─── FEATURE LIST ──────────────────────────────────────────────────────── */

.oww-page--intro .oww-feature-list,
.oww-intro .oww-feature-list {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    margin:         var(--oww-space-lg) 0;
}

.oww-page--intro .oww-feature-list__item,
.oww-intro .oww-feature-list__item {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    font-size:   0.875rem;
    color:       var(--oww-cream-muted);
    line-height: 1.65;
}

.oww-page--intro .oww-feature-list__icon,
.oww-intro .oww-feature-list__icon {
    flex-shrink: 0;
    width:       20px;
    height:      20px;
    margin-top:  2px;
    color:       var(--oww-amber);
    opacity:     0.8;
}

.oww-page--intro .oww-feature-list__icon svg,
.oww-intro .oww-feature-list__icon svg { width: 100%; height: 100%; }


/* ─── REGION GRID ───────────────────────────────────────────────────────── */

.oww-page--intro .oww-region-grid,
.oww-intro .oww-region-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:                   12px;
    margin-top:            var(--oww-space-lg);
}

.oww-page--intro .oww-region-card,
.oww-intro .oww-region-card {
    padding:       1.25rem;
    background:    rgba(255, 255, 255, 0.02);
    border:        1px solid var(--oww-bronze-20);
    border-radius: var(--oww-radius-md);
    transition:    all 0.28s var(--oww-ease-out);
}

.oww-page--intro .oww-region-card:hover,
.oww-intro .oww-region-card:hover {
    background:   var(--oww-amber-faint);
    border-color: var(--oww-bronze-30);
    transform:    translateY(-3px);
}

.oww-page--intro .oww-region-card__icon,
.oww-intro .oww-region-card__icon {
    width:         32px;
    height:        32px;
    margin-bottom: 10px;
    color:         var(--oww-amber);
    opacity:       0.7;
}

.oww-page--intro .oww-region-card__icon svg,
.oww-intro .oww-region-card__icon svg { width: 100%; height: 100%; }

.oww-page--intro .oww-region-card__title,
.oww-intro .oww-region-card__title {
    font-size:    0.875rem;
    font-weight:  600;
    color:        var(--oww-cream);
    margin-bottom: 5px;
}

.oww-page--intro .oww-region-card__desc,
.oww-intro .oww-region-card__desc {
    font-size:   0.75rem;
    color:       var(--oww-cream-muted);
    line-height: 1.6;
}


/* ─── STEPS ─────────────────────────────────────────────────────────────── */

.oww-page--intro .oww-steps,
.oww-intro .oww-steps {
    display:        flex;
    flex-direction: column;
    gap:            clamp(1.5rem, 3vw, 2.5rem);
    margin-top:     var(--oww-space-lg);
    counter-reset:  oww-steps;
}

.oww-page--intro .oww-step,
.oww-intro .oww-step {
    display:     flex;
    align-items: flex-start;
    gap:         1.25rem;
}

.oww-page--intro .oww-step__num,
.oww-intro .oww-step__num {
    flex-shrink:    0;
    width:          44px;
    height:         44px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     rgba(205, 165, 100, 0.08);
    border:         1px solid var(--oww-bronze-20);
    border-radius:  50%;
    font-family:    var(--oww-ff-display);
    font-size:      1.1rem;
    font-weight:    300;
    color:          var(--oww-amber);
    line-height:    1;
}

.oww-page--intro .oww-step__content,
.oww-intro .oww-step__content { flex: 1; }

.oww-page--intro .oww-step__title,
.oww-intro .oww-step__title {
    font-size:    0.9rem;
    font-weight:  600;
    color:        var(--oww-cream);
    margin-bottom: 5px;
}

.oww-page--intro .oww-step__desc,
.oww-intro .oww-step__desc {
    font-size:   0.82rem;
    color:       var(--oww-cream-muted);
    line-height: 1.65;
}


/* ─── TASTING GRID ──────────────────────────────────────────────────────── */

.oww-page--intro .oww-tasting-grid,
.oww-intro .oww-tasting-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   12px;
    margin-top:            var(--oww-space-lg);
}

.oww-page--intro .oww-tasting-card,
.oww-intro .oww-tasting-card {
    padding:       1.1rem;
    background:    rgba(255, 255, 255, 0.02);
    border:        1px solid var(--oww-bronze-20);
    border-radius: var(--oww-radius-md);
    text-align:    center;
    transition:    all 0.28s var(--oww-ease-out);
}

.oww-page--intro .oww-tasting-card:hover,
.oww-intro .oww-tasting-card:hover {
    background:   var(--oww-amber-faint);
    border-color: var(--oww-bronze-30);
    transform:    translateY(-3px);
}

.oww-page--intro .oww-tasting-card__num,
.oww-intro .oww-tasting-card__num {
    display:        block;
    font-family:    var(--oww-ff-display);
    font-size:      2.2rem;
    font-weight:    200;
    color:          transparent;
    -webkit-text-stroke: 1px rgba(205, 165, 100, 0.3);
    line-height:    1;
    margin-bottom:  8px;
}

.oww-page--intro .oww-tasting-card__title,
.oww-intro .oww-tasting-card__title {
    font-size:    0.875rem;
    font-weight:  600;
    color:        var(--oww-cream);
    margin-bottom: 4px;
}

.oww-page--intro .oww-tasting-card__desc,
.oww-intro .oww-tasting-card__desc {
    font-size:   0.74rem;
    color:       var(--oww-cream-muted);
    line-height: 1.55;
}


/* ─── CTA BOX ───────────────────────────────────────────────────────────── */

.oww-page--intro .oww-cta-box,
.oww-intro .oww-cta-box {
    padding:       clamp(2.5rem, 5vw, 4rem);
    background:    rgba(205, 165, 100, 0.03);
    border:        1px solid var(--oww-bronze-30);
    border-radius: var(--oww-radius-lg);
    text-align:    center;
}

.oww-page--intro .oww-cta-box__title,
.oww-intro .oww-cta-box__title {
    font-size:    clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight:  300;
    color:        var(--oww-cream);
    margin-bottom: 0.75rem;
}

.oww-page--intro .oww-cta-box__copy,
.oww-intro .oww-cta-box__copy {
    font-size:    0.9rem;
    color:        var(--oww-cream-muted);
    line-height:  1.72;
    max-width:    480px;
    margin:       0 auto var(--oww-space-lg);
}

.oww-page--intro .oww-cta-box__actions,
.oww-intro .oww-cta-box__actions {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.875rem;
    justify-content: center;
}


/* ─── SIGNATURE ─────────────────────────────────────────────────────────── */

.oww-page--intro .oww-signature,
.oww-intro .oww-signature {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.5rem;
    margin-top:      var(--oww-space-xl);
}

.oww-page--intro .oww-signature__line,
.oww-intro .oww-signature__line {
    width:      40px;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--oww-amber), transparent);
    opacity:    0.5;
}

.oww-page--intro .oww-signature__text,
.oww-intro .oww-signature__text {
    font-family:    var(--oww-ff-display);
    font-style:     italic;
    font-size:      1rem;
    color:          var(--oww-amber);
    letter-spacing: 0.04em;
}


/* ─── REVEAL ANIMATION BASE ─────────────────────────────────────────────── */

.oww-page--intro .oww-reveal,
.oww-intro .oww-reveal {
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity 0.65s var(--oww-ease-out), transform 0.65s var(--oww-ease-out);
}

.oww-page--intro .oww-reveal.is-visible,
.oww-intro .oww-reveal.is-visible {
    opacity:   1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .oww-page--intro .oww-reveal,
    .oww-intro .oww-reveal {
        opacity:    1;
        transform:  none;
        transition: none;
    }
}


/* ─── RESPONSIVE ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .oww-page--intro .oww-region-grid,
    .oww-intro .oww-region-grid { grid-template-columns: 1fr; }
    .oww-page--intro .oww-tasting-grid,
    .oww-intro .oww-tasting-grid { grid-template-columns: 1fr 1fr; }
    .oww-page--intro .oww-step,
    .oww-intro .oww-step { flex-direction: column; }
    .oww-page--intro .oww-callout,
    .oww-intro .oww-callout { flex-direction: column; }
}

@media (max-width: 420px) {
    .oww-page--intro .oww-tasting-grid,
    .oww-intro .oww-tasting-grid { grid-template-columns: 1fr; }
}