/* Small custom layer on top of Tailwind. Keep minimal (spec: minimal JS/CSS). */

html.theme-light { color-scheme: light; }
html.theme-dark { color-scheme: dark; }

/* ---- Landing background: deep dark-walnut, dark vignette edges + subtle accent glow ---- */
.landing {
  background:
    /* whisper of warmth behind the portrait only */
    radial-gradient(ellipse 55% 42% at 50% 33%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    /* deep near-black, subtly warm, darkening to the edges (vignette) */
    radial-gradient(ellipse 150% 120% at 50% 42%, #16130f 0%, #0c0a09 58%, #070606 100%);
}

/* ---- Landing ----
   One screen, no scrolling, every section reachable in one click. On wide
   screens the six section links sit in two mirrored columns flanking the
   portrait, which uses the horizontal space and frees the vertical space the
   portrait needs to be large. Sizes scale off VIEWPORT HEIGHT via clamp()
   rather than width breakpoints. These rules own the landing's spacing and
   sizing outright — the template carries no Tailwind spacing/size utilities on
   these elements, so there is no specificity race with the Tailwind CDN layer.
   Verified from 320x568 to 1920x1080. */
.landing {
  /* svh, not vh: on mobile, vh ignores browser toolbars and overflows. */
  min-height: 100svh;
  padding-block: clamp(0.75rem, 2.5vh, 3rem);
}

.landing-grid { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* -- centre column -- */
.landing-portrait-wrap { position: relative; display: grid; place-items: center; }
.landing-portrait {
  /* 25vh, not 28: at 320x568 the taller value tips the page into scrolling. */
  width: clamp(7.5rem, 25vh, 17rem); height: clamp(7.5rem, 25vh, 17rem);
  position: relative; z-index: 1;
}
.landing-name  { margin-top: clamp(0.6rem, 2.6vh, 2rem);
                 font-size: clamp(1.75rem, 5.5vw, 4.25rem); line-height: 1.08; }
.landing-title { margin-top: clamp(0.3rem, 1vh, 0.7rem); }
.landing-intro { margin-top: clamp(0.45rem, 1.5vh, 1.1rem); max-width: 34rem;
                 font-size: clamp(0.8125rem, 1.7vh, 0.9375rem); line-height: 1.5; }
.landing-cta   { margin-top: clamp(0.7rem, 2.4vh, 2rem); }
.landing-social { margin-top: clamp(0.7rem, 2.4vh, 2.5rem); }
.landing-legal  { margin-top: clamp(0.5rem, 1.4vh, 1.25rem); }

/* -- the slow gold arc, echoing the DoradzStudio logo mark -- */
.landing-ring { position: absolute; inset: -7%; width: 114%; height: 114%; z-index: 0;
                pointer-events: none; overflow: visible; }
.landing-ring circle { transform-origin: 50% 50%; }
/* stops are styled here, not as SVG attributes, so they follow the themed --accent */
.landing-ring .ring-stop-a { stop-color: var(--accent); stop-opacity: .95; }
.landing-ring .ring-stop-b { stop-color: var(--accent); stop-opacity: .12; }
@keyframes ringspin { to { transform: rotate(360deg); } }

/* -- section links -- */
.landing-nav-wrap { display: flex; flex-direction: column; align-items: center;
                    margin-top: clamp(0.8rem, 3vh, 2.5rem); gap: clamp(0.5rem, 1.6vh, 1.25rem); }
.landing-side { display: flex; justify-content: center; gap: clamp(0.9rem, 3vw, 2.25rem); }
.landing-link { display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
                transition: color .3s ease, transform .3s ease; }
.landing-nav-icon { display: grid; place-items: center;
                    width: clamp(2.6rem, 6.5vh, 3.75rem); height: clamp(2.6rem, 6.5vh, 3.75rem);
                    transition: transform .3s ease, border-color .3s ease, background-color .3s ease; }
.landing-link:hover .landing-nav-icon { transform: scale(1.1); }

/* -- wide screens: mirrored side columns flanking a much larger portrait -- */
/* Threshold is deliberately low on height: on a short-but-wide screen the side
   columns are what makes it fit, since they take the links out of the stack. */
@media (min-width: 1024px) and (min-height: 500px) {
  .landing-grid {
    /* 38rem, not 34: below that the accent title wraps to two lines. */
    display: grid; grid-template-columns: 1fr minmax(min-content, 38rem) 1fr;
    align-items: center; gap: clamp(1.5rem, 4vw, 5rem); max-width: 82rem;
  }
  .landing-center { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; }
  .landing-nav-wrap { display: contents; }
  .landing-side { flex-direction: column; justify-content: center;
                  gap: clamp(1rem, 3.4vh, 2.5rem); grid-row: 1; }
  .landing-side-left  { grid-column: 1; align-items: flex-end; }
  .landing-side-right { grid-column: 3; align-items: flex-start; }
  /* icon nearest the portrait on both sides, so the pair reads inward */
  .landing-side-left  .landing-link { flex-direction: row-reverse; }
  .landing-side-right .landing-link { flex-direction: row; }
  .landing-side .landing-link { align-items: center; gap: clamp(0.5rem, 0.9vw, 0.9rem); }
  .landing-side-left  .landing-link:hover { transform: translateX(-0.35rem); }
  .landing-side-right .landing-link:hover { transform: translateX(0.35rem); }
  .landing-portrait { width: clamp(14rem, 48vh, 28rem); height: clamp(14rem, 48vh, 28rem); }
}

/* -- entrance + idle motion. Declared only under no-preference so that the
      reduced-motion rule below cannot leave content stuck at opacity 0. -- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes riseIn  { from { opacity: 0; transform: translateY(1.25rem); } }
  @keyframes fromLeft  { from { opacity: 0; transform: translateX(-1.5rem); } }
  @keyframes fromRight { from { opacity: 0; transform: translateX(1.5rem); } }

  .landing-ring circle { animation: ringspin 28s linear infinite; }
  .landing-portrait-wrap,
  .landing-name, .landing-title, .landing-intro, .landing-cta,
  .landing-social, .landing-legal { animation: riseIn .9s cubic-bezier(.22,.7,.3,1) both; }
  .landing-portrait-wrap { animation-duration: 1.1s; }
  .landing-name   { animation-delay: .10s; }
  .landing-title  { animation-delay: .18s; }
  .landing-intro  { animation-delay: .26s; }
  .landing-cta    { animation-delay: .34s; }
  .landing-social { animation-delay: .60s; }
  .landing-legal  { animation-delay: .66s; }

  .landing-side-left  .landing-link { animation: fromLeft  .8s cubic-bezier(.22,.7,.3,1) both; }
  .landing-side-right .landing-link { animation: fromRight .8s cubic-bezier(.22,.7,.3,1) both; }
  .landing-side .landing-link:nth-child(1) { animation-delay: .40s; }
  .landing-side .landing-link:nth-child(2) { animation-delay: .48s; }
  .landing-side .landing-link:nth-child(3) { animation-delay: .56s; }
}

/* Smallest and shortest screens only: the intro paragraph is what pushes the
   links off-screen there, and it restates the accent line just above it. */
@media (max-height: 700px) and (max-width: 430px) {
  .landing-intro { display: none; }
}

/* Subtle film-grain texture overlay */
.noise {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-size: 220px 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Gentle idle motion for the section icons ---- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.icon-float { animation: floaty 4.5s ease-in-out infinite; }

/* Richtext spacing inside hero */
.richtext p { margin: 0; }

/* Respect reduced motion (spec §20, §28) */
@media (prefers-reduced-motion: reduce) {
  *,
  .icon-float { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}