/* ============================================================
   Loaforia Modern Design — 2025/2026 Artisan Trends
   Kinetic Typography · Organic Layouts · Warm Palette ·
   Scroll Reveals · Marquee · Navbar Glass
   ============================================================ */

/* ---- Scroll-reveal utility ---- */
.reveal-item {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-item:nth-child(2) { transition-delay: 0.10s; }
.reveal-item:nth-child(3) { transition-delay: 0.18s; }
.reveal-item:nth-child(4) { transition-delay: 0.26s; }
.reveal-item:nth-child(5) { transition-delay: 0.34s; }

/* ---- Navbar glass on scroll ---- */
.loaf-navbar--scrolled {
    backdrop-filter: blur(14px) saturate(160%);
    background-color: color-mix(in srgb, var(--bg-primary) 78%, transparent) !important;
    box-shadow: 0 1px 28px rgba(0, 0, 0, 0.22);
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.loaf-hero {
    position: relative;
    min-height: 88vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    padding: 3rem 7% 3rem;
}

.loaf-hero__text {
    position: relative;
    z-index: 2;
}

/* Eyebrow label above the headline */
.loaf-hero__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-warm);
    margin-bottom: 1.4rem;
    opacity: 0;
    animation: loafSlideUp 0.55s 0.08s ease forwards;
}

/* Kinetic headline */
.loaf-hero__headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(3rem, 5.5vw, 5.6rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1.8rem;
    padding-bottom: 0.25em;
    color: var(--text-primary);
    overflow: visible;
}

.loaf-hero__line {
    display: block;
    overflow: visible;
}

/* Each word slides up into place with a staggered delay set via inline style */
.loaf-hero__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(48px);
    animation: loafSlideUp 0.7s ease forwards;
    /* line-height 1.4 gives ~2.24rem below baseline at 5.6rem — enough for Playfair descenders.
       The browser promotes animated inline-blocks to GPU layers sized to the layout box;
       a tight line-height (1.15–1.25) cuts off the 'y' descender because the layer texture
       doesn't extend far enough below the baseline. */
    line-height: 1.4;
    overflow: visible;
}

/* Last headline line: padding-bottom is belt-and-suspenders insurance.
   At max font-size (5.6rem), 0.25em ≈ 1.4rem — enough extra depth below
   the word's layout box so the GPU texture always covers the full 'y' tail. */
.loaf-hero__line--last {
    overflow: visible;
    padding-bottom: 0.1em;   /* small visual gap below last word */
}

.loaf-hero__line--last .loaf-hero__word {
    padding-bottom: 0.25em;  /* pushes the animated word's GPU layer border-box below the descender */
}

.loaf-hero__sub {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 46ch;
    line-height: 1.75;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: loafSlideUp 0.65s 0.60s ease forwards;
}

.loaf-hero__cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: loafSlideUp 0.65s 0.76s ease forwards;
}

/* Primary warm button */
.loaf-btn-primary {
    background: var(--accent-warm);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 0.88rem 2.1rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.loaf-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(212, 146, 13, 0.42);
    color: #fff;
    text-decoration: none;
}

/* Outline ghost button */
.loaf-btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-btn);
    border-radius: 100px;
    padding: 0.88rem 2.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: border-color 0.22s ease, background 0.22s ease;
}

.loaf-btn-outline:hover {
    border-color: var(--accent-warm);
    background: var(--accent-warm-bg);
    color: var(--text-primary);
    text-decoration: none;
}

/* Hero image + organic blob */
.loaf-hero__image-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: loafSlideUp 0.8s 0.30s ease forwards;
}

.loaf-hero__blob-bg {
    position: absolute;
    width: 115%;
    height: 115%;
    background: var(--accent-warm-bg);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: loafBlob 9s ease-in-out infinite;
    z-index: 0;
}

.loaf-hero__img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
    transform: perspective(900px) rotateY(-4deg);
    transition: transform 0.48s ease, box-shadow 0.48s ease;
    display: block;
}

.loaf-hero__img:hover {
    transform: perspective(900px) rotateY(0deg) scale(1.025);
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.48);
}

/* Responsive hero */
@media (max-width: 900px) {
    .loaf-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 4rem 5% 3rem;
        text-align: center;
    }

    .loaf-hero__sub { max-width: 100%; }
    .loaf-hero__cta { justify-content: center; }
    .loaf-hero__image-wrap { order: -1; }
    .loaf-hero__img { max-width: 88%; }
}

/* ================================================================
   MARQUEE STRIP
   ================================================================ */
.loaf-marquee-band {
    overflow: hidden;
    white-space: nowrap;
    padding: 1.15rem 0;
    background: var(--accent-warm-bg);
    border-top: 1px solid var(--border-faint);
    border-bottom: 1px solid var(--border-faint);
    position: relative;
    z-index: 1;
}

.loaf-marquee-track {
    display: inline-block;
    animation: loafMarquee 24s linear infinite;
    font-family: 'Yellowtail', cursive;
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    color: var(--accent-warm);
    letter-spacing: 0.04em;
}

.loaf-marquee-track span {
    margin: 0 1.6rem;
    opacity: 0.88;
}

/* ================================================================
   VALUES STRIP
   ================================================================ */
.loaf-values {
    padding: 5.5rem 7%;
}

.loaf-values__heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.9rem, 3.5vw, 2.9rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.55rem;
    color: var(--text-primary);
}

.loaf-values__sub {
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 3.5rem;
    max-width: 55ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.loaf-values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 760px) {
    .loaf-values__grid { grid-template-columns: 1fr; }
}

@media (min-width: 761px) and (max-width: 1020px) {
    .loaf-values__grid { grid-template-columns: 1fr 1fr; }
}

.loaf-value-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-faint);
    border-radius: 22px;
    padding: 2.4rem 2rem;
    text-align: center;
    cursor: default;
    transition: transform 0.30s ease, box-shadow 0.30s ease, border-color 0.30s ease;
}

.loaf-value-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    border-color: var(--accent-warm);
}

.loaf-value-card__icon {
    font-size: 2.8rem;
    margin-bottom: 1.1rem;
    display: block;
    line-height: 1;
}

.loaf-value-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
    color: var(--text-primary);
}

.loaf-value-card__body {
    font-size: 0.93rem;
    color: var(--text-muted);
    line-height: 1.68;
}

/* ================================================================
   STORY FEATURE SECTION
   ================================================================ */
.loaf-story {
    padding: 5rem 7%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

@media (max-width: 860px) {
    .loaf-story {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3.5rem 5%;
    }
}

.loaf-story__image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.loaf-story__blob {
    position: absolute;
    inset: -14%;
    background: var(--accent-warm-bg);
    border-radius: 50% 40% 60% 40% / 40% 50% 50% 60%;
    animation: loafBlob 11s 1.5s ease-in-out infinite;
    z-index: 0;
}

.loaf-story__img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    border-radius: 22px;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.30);
    display: block;
}

.loaf-story__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-warm);
    display: block;
    margin-bottom: 1rem;
}

.loaf-story__headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    font-weight: 700;
    line-height: 1.18;
    margin-bottom: 1.2rem;
    color: var(--text-primary);
}

.loaf-story__accent {
    font-style: italic;
    color: var(--accent-warm);
}

.loaf-story__body {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.78;
    margin-bottom: 1.6rem;
}

/* ================================================================
   CERTIFICATIONS
   ================================================================ */
.loaf-certs {
    padding: 4.5rem 7%;
    text-align: center;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-faint);
    border-bottom: 1px solid var(--border-faint);
}

.loaf-certs__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2.2rem;
    display: block;
}

.loaf-certs__items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem 4rem;
}

.loaf-cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    opacity: 0.82;
    transition: opacity 0.22s, transform 0.22s;
}

.loaf-cert-item:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.loaf-cert-item__icon {
    font-size: 2.1rem;
    line-height: 1;
}

.loaf-cert-item__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* ================================================================
   CTA BAND
   ================================================================ */
.loaf-cta-band {
    padding: 5.5rem 7%;
    text-align: center;
    background: var(--accent-warm-bg);
    border-top: 1px solid var(--border-faint);
}

.loaf-cta-band__headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.1rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.14;
}

.loaf-cta-band__sub {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.72;
}

/* ================================================================
   KEYFRAME ANIMATIONS
   ================================================================ */

/* Kinetic word entrance */
@keyframes loafSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Organic blob morph */
@keyframes loafBlob {
    0%,  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    25%        { border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%; }
    50%        { border-radius: 70% 30% 30% 70% / 50% 60% 40% 50%; }
    75%        { border-radius: 40% 60% 60% 40% / 40% 60% 40% 60%; }
}

/* Seamless marquee scroll — track must be exactly double its content width */
@keyframes loafMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---- Kosher cert logo (replaces ✡ emoji) ---- */

/* Value-card icon (2.8 rem) and cert-item icon (2.1 rem):
   0.8em keeps logos visually balanced with the emoji icons alongside them */
.loaf-cert-logo-icon {
    height: 0.8em;
    width: auto;
    display: block;
    margin: 0 auto;
    filter: var(--cert-filter);
}

/* Inline marquee badge — sits beside the text, matches cap-height */
.loaf-marquee-cert {
    height: 0.85em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.25em;
    filter: var(--cert-filter);
}