/* ==========================================================================
   OMONYMA — Homepage sections (front-page.php)
   Ported directly from the original mockup's own CSS. Standalone theme:
   no parent theme to isolate from, so this file is exactly the component
   styling with nothing fighting it — no Woodmart reset layer needed
   (the Woodmart child theme version of this file had one; removed here
   because there is nothing left for it to counteract).
   ========================================================================== */

/* .omh-imgbox base rules now live in base.css — loaded on every page,
   not just the homepage, since the About page's team photos need it
   too. This file only adds the homepage-specific hover behaviour. */

.omh-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.omh-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Hero ---------- */
.omh-hero {
  height: 100vh !important; width: 100% !important; position: relative !important; display: flex !important; align-items: flex-end !important;
  background-color: var(--color-ink) !important; background-size: cover !important; background-position: center !important;
  overflow: hidden !important;
}
.omh-hero-overlay {
  position: absolute !important; inset: 0;
  background: linear-gradient(180deg, rgba(20,19,17,0.35) 0%, rgba(20,19,17,0.15) 35%, rgba(20,19,17,0.75) 100%) !important;
}
.omh-hero-content { position: relative !important; z-index: 2 !important; width: 100% !important; padding: 0 3rem 5.5rem !important; color: var(--color-bg); }
.omh-eyebrow { font-size: 0.72rem !important; letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: 0.85; margin-bottom: 1.4rem; font-weight: 500; }
.omh-hero-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.5rem, 2.2rem + 6vw, 9.5rem) !important; line-height: 0.92; letter-spacing: -0.01em; margin-bottom: 2rem; }
.omh-cta { display: inline-flex !important; align-items: center !important; gap: 0.6rem !important; font-size: 0.85rem !important; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; font-weight: 500; color: inherit; border-bottom: 1px solid rgba(247,245,241,0.5); padding-bottom: 0.4rem; }
.omh-scroll-indicator { position: absolute !important; bottom: 2rem !important; left: 50% !important; transform: translateX(-50%); display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.6rem !important; z-index: 2 !important; color: rgba(247,245,241,0.7); }
.omh-scroll-indicator span { font-size: 0.6rem !important; letter-spacing: 0.2em; text-transform: uppercase; }
.omh-scroll-indicator .line { width: 1px !important; height: 34px !important; background: rgba(247,245,241,0.35) !important; position: relative !important; overflow: hidden !important; }
.omh-scroll-indicator .line::after { content: ""; position: absolute !important; top: -100% !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(247,245,241,0.9) !important; animation: omhScroll 2.2s cubic-bezier(0.4,0,0.2,1) infinite; }
@keyframes omhScroll { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }

/* ---------- Brand intro ---------- */
.omh-intro { padding: 9rem 3rem !important; text-align: center !important; position: relative !important; overflow: hidden !important; }
.omh-intro p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 2vw, 3.2rem) !important; line-height: 1.25; max-width: 760px !important; margin: 0 auto 2rem !important; position: relative; z-index: 2; }
.omh-intro a { font-size: 0.72rem !important; letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; color: var(--color-ink); border-bottom: 1px solid var(--color-line); padding-bottom: 3px; font-weight: 500; position: relative; z-index: 2; }

/* Decorative rotating rings — approved concept #1. Two thin outlines,
   opposite directions, slow enough to feel calm rather than busy.
   Pure CSS, no JS; purely decorative (aria-hidden) so they add nothing
   to screen readers. */
.omh-intro-ring {
	position: absolute; top: 50%; left: 50%; z-index: 1; border-radius: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid var(--color-line);
}
.omh-intro-ring-1 {
	width: min(70vw, 640px); height: min(70vw, 640px);
	border-top-color: rgba(26, 26, 24, 0.4);
	animation: omh-ring-spin 34s linear infinite;
}
.omh-intro-ring-2 {
	width: min(48vw, 440px); height: min(48vw, 440px);
	border-top-color: transparent; border-right-color: rgba(26, 26, 24, 0.28);
	animation: omh-ring-spin 44s linear infinite reverse;
}
@keyframes omh-ring-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.omh-intro-ring { animation: none; }
}

/* ---------- Collection ---------- */
.omh-collection { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: center !important; gap: 0 !important; padding: 4rem 3rem !important; }
.omh-collection-text .num { font-family: var(--font-display); font-size: clamp(4rem, 2rem + 8vw, 9rem) !important; line-height: 0.85; }
.omh-collection-text .label { margin: 1rem 0 2rem !important; color: var(--color-ink-soft); }
.omh-collection-text .label span { display: block !important; font-size: 0.95rem !important; margin-top: 0.3rem; }
.omh-collection-text a { display: inline-flex !important; align-items: center !important; gap: 0.6rem !important; font-size: 0.85rem !important; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--color-ink); border-bottom: 1px solid var(--color-line); padding-bottom: 0.4rem; }
.omh-collection-visual { aspect-ratio: 4/5 !important; }

/* ---------- Categories ---------- */
.omh-worlds { display: block !important; }
.omh-world {
  position: relative !important; display: block !important; text-decoration: none; overflow: hidden !important;
  height: 70vh !important;
}
.omh-world .omh-imgbox img,
.omh-world img { transition: transform 0.7s var(--ease) !important; }
.omh-world:hover .omh-imgbox img,
.omh-world:hover img { transform: scale(1.03); }

/* Mobile (≤1024px, the default/base rules): text bottom-left, gradient
   rising from the bottom for readability against a busy photo. */
.omh-world-overlay {
  position: absolute !important; inset: 0;
  background: linear-gradient(0deg, rgba(20,19,17,0.4) 0%, rgba(20,19,17,0) 40%) !important;
  z-index: 1 !important;
}
.omh-world-copy {
  position: absolute !important; left: 24px !important; right: 24px !important; bottom: 24px !important; top: auto !important;
  z-index: 2 !important; color: #fff; display: flex !important; flex-direction: column !important;
}
.omh-world-copy .title {
  font-family: var(--font-display); font-weight: 400; color: #fff;
  font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.4rem) !important; line-height: 0.95;
}
.omh-world-copy .link {
  display: inline-flex !important; gap: 0.5rem !important; margin-top: 0.6rem;
  font-size: 0.68rem !important; letter-spacing: 2px; text-transform: uppercase; color: #fff;
}

/* Desktop (≥1025px): text left, vertically centered; gradient from the
   left instead of the bottom, since the copy now sits mid-height. */
@media (min-width: 1025px) {
  .omh-world { height: 60vh !important; min-height: 480px !important; max-height: 700px !important; }
  .omh-world-overlay {
    background: linear-gradient(90deg, rgba(20,19,17,0.4) 0%, rgba(20,19,17,0) 40%) !important;
  }
  .omh-world-copy {
    left: clamp(40px, 6vw, 100px) !important; right: auto !important;
    top: 0 !important; bottom: 0 !important; justify-content: center !important;
    max-width: 46%;
  }
}

/* ---------- New In ---------- */
.omh-newin { padding: 9rem 0 6rem !important; }
.omh-newin-head { display: flex !important; justify-content: space-between !important; align-items: baseline !important; padding: 0 3rem 2.5rem !important; }
.omh-newin-head h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.6rem) !important; font-weight: 400; }
.omh-newin-head a { font-size: 0.72rem !important; letter-spacing: var(--tracking-label); text-transform: uppercase; text-decoration: none; color: var(--color-ink); }
.omh-newin-rail { display: flex !important; gap: 1.6rem !important; overflow-x: auto !important; padding: 0 3rem 1rem !important; scrollbar-width: none; }
.omh-newin-rail::-webkit-scrollbar { display: none !important; }
.omh-product-card { flex: 0 0 280px !important; }
.omh-product-card a { text-decoration: none; color: inherit; }
.omh-product-card img { aspect-ratio: 4/5 !important; width: 100% !important; height: auto !important; object-fit: cover !important; margin-bottom: 1rem; }
.omh-product-card .name { font-size: 0.9rem !important; margin-bottom: 0.25rem; }
.omh-product-card .price { font-size: 0.9rem !important; color: var(--color-ink-soft); }

/* ---------- Genesis ---------- */
.omh-genesis { padding: 9rem 3rem !important; background: var(--color-bg-alt) !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4rem !important; align-items: center !important; }
.omh-eyebrow-soft { color: var(--color-ink-soft); margin-bottom: 1rem; font-size: 0.72rem !important; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.omh-genesis-copy h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) !important; line-height: 0.95; margin-bottom: 1rem; }
.omh-genesis-copy .sub { font-size: 1.05rem !important; color: var(--color-ink-soft); margin-bottom: 2.5rem; max-width: 420px !important; }
.omh-genesis-list { list-style: none; border-top: 1px solid var(--color-line); }
.omh-genesis-item { border-bottom: 1px solid var(--color-line); }
.omh-genesis-item .row { display: flex !important; align-items: center !important; gap: 1.2rem !important; padding: 1.1rem 0 !important; font-size: 0.85rem !important; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; background: none !important; border: none; width: 100% !important; text-align: left !important; font-family: var(--font-ui); color: var(--color-ink); }
.omh-genesis-item .n { color: var(--color-ink-soft); }
.omh-genesis-item .title { flex: 1 !important; }
.omh-genesis-item .plus { font-size: 1rem !important; transition: transform 0.4s var(--ease); }
.omh-genesis-item.is-open .plus { transform: rotate(45deg); }
.omh-genesis-item .panel { max-height: 0; overflow: hidden !important; transition: max-height 0.5s var(--ease); }
.omh-genesis-item.is-open .panel { max-height: 200px; }
.omh-genesis-item .panel p { padding: 0 0 1.4rem !important; margin: 0 !important; font-size: 0.95rem !important; text-transform: none; letter-spacing: normal; color: var(--color-ink-soft); line-height: 1.5; max-width: 420px !important; }
.omh-genesis-visual { aspect-ratio: 4/5 !important; background: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.omh-genesis-visual img { width: 100% !important; height: auto !important; object-fit: contain !important; }

/* ---------- Campaign ---------- */
.omh-campaign { height: 90vh !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; background-size: cover !important; background-position: center !important; background-color: var(--color-ink) !important; overflow: hidden !important; }
.omh-campaign-video { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 0; }
.omh-campaign-overlay { position: absolute !important; inset: 0; background: rgba(15,14,12,0.45) !important; z-index: 1; }
.omh-campaign-title { position: relative !important; z-index: 2 !important; font-family: var(--font-display); font-size: clamp(3.5rem, 2vw + 6rem, 8rem) !important; line-height: 0.9; text-align: center !important; color: var(--color-bg); text-transform: uppercase; }

/* ---------- Community ---------- */
.omh-community { padding: 9rem 3rem !important; }
.omh-community-head { text-align: center !important; margin-bottom: 3.5rem; }
.omh-community-head h2 { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 2.5vw, 3.5rem) !important; line-height: 1; }
.omh-community-head .label { display: block !important; margin-top: 0.8rem; color: var(--color-ink-soft); font-size: 0.72rem !important; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.omh-community-grid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; grid-auto-rows: 160px !important; gap: 0.9rem !important; }
.omh-community-grid .item:nth-child(1) { grid-column: span 3 !important; grid-row: span 2 !important; }
.omh-community-grid .item:nth-child(2) { grid-column: span 2 !important; grid-row: span 3 !important; }
.omh-community-grid .item:nth-child(3) { grid-column: span 1 !important; grid-row: span 2 !important; }
.omh-community-grid .item:nth-child(4) { grid-column: span 2 !important; grid-row: span 2 !important; }
.omh-community-grid .item:nth-child(5) { grid-column: span 2 !important; grid-row: span 2 !important; }
.omh-community-grid .item:nth-child(6) { grid-column: span 2 !important; grid-row: span 3 !important; }


/* ---------- Newsletter ---------- */
.omh-newsletter { padding: 9rem 3rem !important; text-align: center !important; }
.omh-newsletter h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) !important; margin-bottom: 2.5rem; }
.omh-newsletter-form { display: flex !important; justify-content: center !important; align-items: flex-end !important; gap: 1rem !important; max-width: 420px !important; margin: 0 auto !important; }
.omh-newsletter-form input { flex: 1 !important; background: transparent !important; border: none; border-bottom: 1px solid var(--color-line); padding: 0.6rem 0 !important; font-family: var(--font-ui); font-size: 1rem !important; color: var(--color-ink); }
.omh-newsletter-form button { background: none !important; border: none; border-bottom: 1px solid var(--color-ink); padding-bottom: 0.6rem; font-size: 0.85rem !important; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .omh-scroll-indicator .line::after { animation: none; top: 0 !important; }
  .omh-imgbox img, .omh-genesis-item .panel, .omh-genesis-item .plus { transition: none; }
  .omh-reveal { opacity: 1; transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .omh-hero-content, .omh-intro, .omh-collection, .omh-genesis, .omh-community, .omh-newsletter, .omh-newin-head, .omh-newin-rail { padding-inline: 1.25rem !important; }
  .omh-collection { grid-template-columns: 1fr !important; }
  .omh-genesis { grid-template-columns: 1fr !important; }
  /* Horizontal-scroll carousel on mobile only (approved concept #2) —
     desktop's 6-item bento grid above is untouched; this only re-lays-out
     the SAME .item elements as a swipeable row instead of a grid. */
  .omh-community-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    gap: 0.7rem !important;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .omh-community-grid .item:nth-child(n) {
    grid-column: unset !important; grid-row: unset !important;
    flex: 0 0 68% !important; aspect-ratio: 4 / 5 !important; height: auto !important;
    scroll-snap-align: start;
  }
  .omh-hero-title { font-size: clamp(2.75rem, 2rem + 8vw, 5rem) !important; }
  /* Height for this breakpoint now comes from the base .omh-world rule
     (70vh, per the updated category-showcase spec) — no override
     needed here anymore. */
  /* Carousel cards: fixed 280px was wider than most phone screens, so it
     read as "one full-width card", not a carousel. Sized relative to the
     viewport so the next card always peeks in, capped so it doesn't get
     silly-wide on a tablet. */
  .omh-product-card { flex: 0 0 min(72vw, 280px) !important; }
}

/* ==========================================================================
   Find Your OMONYMA Colour — homepage teaser (below Genesis & Pnoe)
   ========================================================================== */
.omh-quiz-teaser{
  padding: 6rem 1.5rem; text-align: center; background: var(--color-bg);
}
.omh-quiz-teaser-ring-wrap{ width: 100px; height: 100px; margin: 0 auto 2rem; position: relative; }
.omh-quiz-teaser-ring{
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid #A5583A;
  animation: omhQuizBreathe 4s ease-in-out infinite, omhQuizRingColor 12s ease-in-out infinite;
}
.omh-quiz-teaser-ring::after{
  content: ""; position: absolute; inset: 22px; border-radius: 50%; background: currentColor; opacity: 0.15;
}
@keyframes omhQuizBreathe{
  0%, 100% { transform: scale(0.9); opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes omhQuizRingColor{
  0%   { border-color: #A5583A; color: #A5583A; } /* Spicy Cinnamon */
  33%  { border-color: #4A6A52; color: #4A6A52; } /* Serenity Green */
  66%  { border-color: #6A5A8A; color: #6A5A8A; } /* Mystique Violet */
  100% { border-color: #A5583A; color: #A5583A; }
}
.omh-quiz-teaser-line1{ font-family: var(--font-display); font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.8rem); margin-bottom: 0.5rem; color: var(--color-ink); }
.omh-quiz-teaser-line2{ font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.7; max-width: 400px; margin: 0 auto 2.2rem; }
.omh-quiz-teaser-cta{
  display: inline-block; background: var(--color-ink); color: var(--color-bg); text-decoration: none;
  padding: 1rem 2.2rem; font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
}
.omh-quiz-teaser-cta:hover{ opacity: 0.88; }
@media (prefers-reduced-motion: reduce){
  .omh-quiz-teaser-ring{ animation: none; }
}