/*
 * 12 Senses Coffee — extra styles & coffee-themed motion (plain CSS, no build step).
 * Every animation is disabled for visitors who prefer reduced motion.
 */

/* ---------------------------------------------------------------
 * Home hero sizing (kept compact)
 * ------------------------------------------------------------- */
.home-hero-grid { padding-top: 3rem; padding-bottom: 3rem; }
.home-hero-media { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
    .home-hero-grid { padding-top: 4rem; padding-bottom: 3.5rem; }
    .home-hero-media { aspect-ratio: 1 / 1; max-height: 520px; margin-inline: auto; }
}

/* ---------------------------------------------------------------
 * "From bean to cup" — steps light up along a filling line on scroll
 * ------------------------------------------------------------- */
.b2c { padding: 2.5rem 1rem 5rem;background: rgb(var(--c-cream-50)); overflow: hidden; }
.b2c__inner { max-width: 72rem; margin: 0 auto; text-align: center; }
.b2c__eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--c-gold-600)); }
.b2c__title { margin-top: .75rem; font-size: clamp(1.875rem, 3vw, 2.25rem); font-weight: 600; color: rgb(var(--c-espresso-900)); }
.b2c__subtitle { margin: .75rem auto 0; max-width: 34rem; color: rgb(var(--c-espresso-500)); line-height: 1.7; }

.b2c__track {
    position: relative;
    margin-top: 3.5rem;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .b2c__track { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

/* connecting line (horizontal on desktop, vertical on mobile) */
.b2c__line {
    position: absolute;
    background: rgb(var(--c-espresso-900) / .08);
    border-radius: 999px;
    top: 44px; bottom: 44px;
    inset-inline-start: calc(50% - 1.5px);
    width: 3px;
}
.b2c__line-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, #7a4b2c, rgb(var(--c-gold-400)));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 2s cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 768px) {
    .b2c__line {
        top: 43px; bottom: auto;
        inset-inline: 12.5%;
        width: auto; height: 3px;
    }
    .b2c__line-fill {
        background: linear-gradient(90deg, #7a4b2c, rgb(var(--c-gold-400)));
        transform: scaleX(0);
        transform-origin: left;
    }
    [dir="rtl"] .b2c__line-fill { transform-origin: right; background: linear-gradient(270deg, #7a4b2c, rgb(var(--c-gold-400))); }
}
.b2c.is-in .b2c__line-fill { transform: none; }

.b2c__step {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--i) * .45s + .2s);
}
.b2c.is-in .b2c__step { opacity: 1; transform: none; }

.b2c__icon {
    position: relative;
    width: 88px; height: 88px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgb(var(--c-espresso-950));
    color: rgb(var(--c-gold-300));
    box-shadow: 0 0 0 6px rgb(var(--c-cream-50)), 0 0 0 7px rgb(var(--c-gold-400) / .35), 0 14px 30px rgb(var(--c-espresso-950) / .25);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.b2c__step:hover .b2c__icon {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 0 0 6px rgb(var(--c-cream-50)), 0 0 0 8px rgb(var(--c-gold-400) / .7), 0 18px 36px rgb(var(--c-espresso-950) / .3);
}
.b2c__icon svg { width: 40px; height: 40px; overflow: visible; }

/* icon strokes draw themselves in */
.b2c__draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.1s ease;
    transition-delay: calc(var(--i) * .45s + .5s);
}
.b2c.is-in .b2c__draw { stroke-dashoffset: 0; }

.b2c__num {
    position: absolute;
    top: -4px; inset-inline-end: -4px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgb(var(--c-gold-400));
    color: rgb(var(--c-espresso-950));
    font-size: .75rem; font-weight: 700;
}
.b2c__step h3 { margin-top: 1.25rem; font-size: 1.125rem; font-weight: 600; color: rgb(var(--c-espresso-900)); }
.b2c__step p { margin-top: .4rem; max-width: 15rem; font-size: .875rem; line-height: 1.6; color: rgb(var(--c-espresso-500)); }

/* living details once the section is visible */
.b2c__flame { transform-origin: 50% 100%; }
.b2c.is-in .b2c__flame { animation: b2c-flicker 1.4s ease-in-out 2.4s infinite; }
@keyframes b2c-flicker {
    0%, 100% { transform: scale(1, 1); }
    35% { transform: scale(.94, 1.06); }
    70% { transform: scale(1.04, .96); }
}
.b2c__drop { opacity: 0; }
.b2c.is-in .b2c__drop { animation: b2c-drip 1.6s ease-in 3s infinite; }
.b2c.is-in .b2c__drop--2 { animation-delay: 3.8s; }
@keyframes b2c-drip {
    0% { opacity: 0; transform: translateY(0); }
    15% { opacity: 1; }
    80% { opacity: 1; transform: translateY(7px); }
    100% { opacity: 0; transform: translateY(9px); }
}
.b2c__steam { opacity: 0; }
.b2c.is-in .b2c__steam { animation: b2c-steam 2.2s ease-out 3.4s infinite; }
.b2c.is-in .b2c__steam--2 { animation-delay: 4.1s; }
@keyframes b2c-steam {
    0% { opacity: 0; transform: translateY(3px); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-6px); }
}

/* ---------------------------------------------------------------
 * Steam over hot-drink photos on hover
 * ------------------------------------------------------------- */
.cup-steam {
    position: absolute;
    left: 50%;
    top: 8%;
    width: 60px;
    height: 70px;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 2;
}
.cup-steam span {
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(to top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
    filter: blur(5px);
}
.cup-steam span:nth-child(1) { left: 6px; }
.cup-steam span:nth-child(2) { left: 25px; }
.cup-steam span:nth-child(3) { left: 44px; }
.group:hover .cup-steam { opacity: 1; }
.group:hover .cup-steam span { animation: steam-puff 1.8s ease-out infinite; }
.group:hover .cup-steam span:nth-child(2) { animation-delay: .4s; }
.group:hover .cup-steam span:nth-child(3) { animation-delay: .8s; }
@keyframes steam-puff {
    0%   { transform: translateY(12px) scaleX(.6); opacity: 0; }
    40%  { opacity: .9; }
    100% { transform: translateY(-30px) scaleX(1.4); opacity: 0; }
}

/* ---------------------------------------------------------------
 * Scroll progress — a thin line of "coffee" filling across the top
 * ------------------------------------------------------------- */
.coffee-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 70;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(var(--progress, 0));
    background: linear-gradient(90deg, #5b3520, rgb(var(--c-gold-400)), #c8894f);
}
[dir="rtl"] .coffee-progress { transform-origin: 100% 50%; }

/* ---------------------------------------------------------------
 * Light sweep on the main call-to-action
 * ------------------------------------------------------------- */
.coffee-shine { position: relative; overflow: hidden; isolation: isolate; }
.coffee-shine::after {
    content: "";
    position: absolute;
    inset: -20% auto -20% -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    animation: cta-shine 5s ease-in-out infinite;
    z-index: -1;
}
@keyframes cta-shine {
    0%, 65% { left: -60%; }
    90%, 100% { left: 130%; }
}

/* ---------------------------------------------------------------
 * Reduced motion: show everything, move nothing
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .b2c__step, .b2c__line-fill, .b2c__draw { transition: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
    .b2c__flame, .b2c__drop, .b2c__steam { animation: none !important; }
    .b2c__drop, .b2c__steam { opacity: 1; }
    .cup-steam, .coffee-progress { display: none; }
    .coffee-shine::after { display: none; }
}

/* ---------------------------------------------------------------
 * Home "Brand Story" — compact
 * ------------------------------------------------------------- */
.home-story { padding-top: 3.5rem; padding-bottom: 1rem; }
.home-story-media { aspect-ratio: 16 / 10; max-height: 360px; }
@media (min-width: 1024px) { .home-story-media { aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------------------
 * Home "Why choose us" flip cards (hover on desktop, tap/focus on touch)
 * ------------------------------------------------------------- */
.flip-card { perspective: 1000px; outline: none; cursor: pointer; }
.flip-card__inner {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.flip-card:hover .flip-card__inner,
.flip-card:focus .flip-card__inner,
.flip-card:focus-within .flip-card__inner { transform: rotateY(180deg); }
.flip-card__face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-card__back { transform: rotateY(180deg); }
.flip-card:focus-visible .flip-card__face { box-shadow: 0 0 0 3px rgb(var(--c-gold-400) / .6); }
@media (prefers-reduced-motion: reduce) {
    .flip-card__inner { transition: none; }
}

/* ---------------------------------------------------------------
 * Menu category tabs stick right under the site header (height set by coffee-motion.js)
 * ------------------------------------------------------------- */
.menu-tabs-sticky { top: var(--site-header-h, 101px); }

/* ---------------------------------------------------------------
 * Polish: gentle, premium micro-animations
 * ------------------------------------------------------------- */

/* Page fades in softly */
main { animation: page-in .6s ease-out both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* Hero photo: slow "Ken Burns" drift */
.home-hero-media img { animation: ken-burns 18s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }

/* Product cards lift with a warm glow */
.coffee-card { transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.2, .8, .2, 1); }
.coffee-card.reveal.is-visible:hover { transform: translateY(-6px); }
.coffee-card:hover { transform: translateY(-6px); }
.coffee-card > a > div:first-child,
.coffee-card > div:first-child {
    transition: box-shadow .45s ease;
}
.coffee-card:hover > a > div:first-child,
.coffee-card:hover > div:first-child {
    box-shadow: 0 18px 40px -12px rgb(var(--c-espresso-950) / .35), 0 0 0 2px rgb(var(--c-gold-400) / .55);
}

/* Centered section headings get a gold underline that draws in when revealed */
.text-center > h2.font-serif::after,
h2.reveal.text-center::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #7a4b2c, rgb(var(--c-gold-400)));
    transform: scaleX(0);
    transition: transform .9s cubic-bezier(.2, .8, .2, 1) .25s;
}
.text-center.is-visible > h2.font-serif::after,
.reveal.is-visible.text-center > h2.font-serif::after,
h2.reveal.text-center.is-visible::after { transform: scaleX(1); }

/* Buttons lift slightly */
.btn-primary, .coffee-shine { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.btn-primary:hover, .coffee-shine:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    main, .home-hero-media img { animation: none; }
    .coffee-card, .coffee-card:hover, .btn-primary:hover, .coffee-shine:hover { transform: none; }
    .text-center > h2.font-serif::after, h2.reveal.text-center::after { transform: scaleX(1); transition: none; }
}

/* ---------------------------------------------------------------
 * Legal pages (privacy / terms / refund)
 * ------------------------------------------------------------- */
.legal-content h2 { margin: 2.2rem 0 .8rem; font-size: 1.35rem; font-weight: 600; color: rgb(var(--c-espresso-900)); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin: .75rem 0; line-height: 1.8; color: rgb(var(--c-espresso-600)); }
.legal-content ul { margin: .75rem 0; padding-inline-start: 1.4rem; list-style: disc; }
.legal-content li { margin: .4rem 0; line-height: 1.75; color: rgb(var(--c-espresso-600)); }
.legal-content li::marker { color: rgb(var(--c-gold-500)); }
.legal-content a { color: rgb(var(--c-gold-600)); text-decoration: underline; text-underline-offset: 3px; }
.legal-content strong { color: rgb(var(--c-espresso-900)); }