/* =========================================================================
   ANTHONY'S PASTIZZI — Coming Soon
   A quiet editorial holding page: warm light, soft blur, and type.

   There is no photograph anywhere in this file. The entire backdrop is
   composed from layered gradients, blur and grain, tuned to read as
   morning light falling through a small bakery window. That keeps the
   page dependency-free, fast, and fully ownable — every warm tone here
   is a deliberate choice, not a stock photo licence.
   ========================================================================= */

:root {
  /* ---- Palette --------------------------------------------------------- */
  --ivory:          #F7F1E4;
  --cream:          #FBF6EA;
  --glow-white:     #FFFBF1;
  --beige:          #E8D8B8;
  --wheat:          #C99A52;
  --wheat-soft:     #D9B77C;
  --bronze:         #8A6A42;
  --bronze-text:    #7C5A34;
  --espresso:       #3A2A1C;
  --espresso-deep:  #241811;
  --espresso-rgb:   58, 42, 28;

  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden; /* one screen, always — never a scrollbar */
  background: var(--ivory);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, p { margin: 0; }

::selection {
  background: var(--wheat);
  color: var(--espresso-deep);
}

/* =========================================================================
   SCENE — the atmosphere. Every layer here is decorative and hidden from
   assistive tech. The whole scene is sized 5% larger than the viewport on
   every edge so the gentle cursor parallax never reveals an edge.
   ========================================================================= */

.scene {
  position: fixed;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  animation: scene-in 2.2s var(--ease-soft) .1s forwards;
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0);
}

@keyframes scene-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Base wash: a soft diagonal fall of light, cream at the top-left
   easing into deeper wheat and bronze toward the far corner. */
.scene__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 28% 20%, rgba(255, 251, 241, .55), transparent 60%),
    radial-gradient(65% 55% at 78% 80%, rgba(138, 106, 66, .30), transparent 65%),
    linear-gradient(160deg, #F8F1E3 0%, #F1E4C8 30%, #E4CFA0 55%, #C9A05C 78%, #93724A 100%);
}

/* A soft spotlight sitting behind the wordmark, breathing very slowly. */
.scene__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(44% 34% at 50% 40%, var(--glow-white) 0%, rgba(255, 251, 241, 0) 72%);
  mix-blend-mode: soft-light;
  animation: glow-breathe 15s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

@keyframes glow-breathe {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 1;  transform: scale(1.06); }
}

/* Four heavily blurred pools of warm light — the suggestion of pastries
   and lamps caught out of focus, never resolving into an object. */
.scene__bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.scene__bokeh--1 {
  top: 16%; left: 12%; width: 38vmax; height: 38vmax;
  background: radial-gradient(circle, var(--wheat-soft), transparent 70%);
  opacity: .28;
  animation: drift-a 34s ease-in-out infinite alternate;
}
.scene__bokeh--2 {
  top: 74%; left: 84%; width: 44vmax; height: 44vmax;
  background: radial-gradient(circle, var(--bronze), transparent 70%);
  opacity: .22;
  filter: blur(95px);
  animation: drift-b 40s ease-in-out infinite alternate;
}
.scene__bokeh--3 {
  top: 88%; left: 18%; width: 30vmax; height: 30vmax;
  background: radial-gradient(circle, var(--cream), transparent 70%);
  opacity: .32;
  filter: blur(60px);
  animation: drift-c 27s ease-in-out infinite alternate;
}
.scene__bokeh--4 {
  top: 8%; left: 82%; width: 34vmax; height: 34vmax;
  background: radial-gradient(circle, var(--beige), transparent 70%);
  opacity: .24;
  filter: blur(80px);
  animation: drift-a 46s ease-in-out infinite alternate;
}

@keyframes drift-a {
  0%   { transform: translate(-50%, -50%) translate(0, 0); }
  100% { transform: translate(-50%, -50%) translate(3%, -4%); }
}
@keyframes drift-b {
  0%   { transform: translate(-50%, -50%) translate(0, 0); }
  100% { transform: translate(-50%, -50%) translate(-4%, 3%); }
}
@keyframes drift-c {
  0%   { transform: translate(-50%, -50%) translate(0, 0); }
  100% { transform: translate(-50%, -50%) translate(4%, 2%); }
}

/* The faintest horizontal suggestion of shelving — never a hard line. */
.scene__shelves {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 128px,
    rgba(var(--espresso-rgb), .045) 130px,
    rgba(var(--espresso-rgb), .045) 134px,
    transparent 136px
  );
  filter: blur(20px);
  transform: rotate(-1deg);
  opacity: .6;
}

/* A handful of soft dust motes drifting upward through the light,
   generated in script.js and skipped for reduced motion. */
.scene__motes { position: absolute; inset: 0; overflow: hidden; }

.mote {
  position: absolute;
  left: var(--left, 50%);
  top: var(--top, 50%);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 251, 241, .9), rgba(255, 251, 241, 0) 70%);
  filter: blur(1px);
  opacity: 0;
  animation: mote-float var(--duration, 30s) linear var(--delay, 0s) infinite;
}

@keyframes mote-float {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: .55; }
  50%  { transform: translate(var(--drift, 10px), -55vh); }
  92%  { opacity: .35; }
  100% { opacity: 0; transform: translate(calc(var(--drift, 10px) * 2), -110vh); }
}

/* Cinematic edge falloff, focusing the eye back to the centre. */
.scene__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 48%, transparent 42%, rgba(36, 24, 17, .38) 100%);
}

/* Fine film grain, drawn with an SVG filter rather than an image file. */
.scene__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  opacity: .05;
  mix-blend-mode: overlay;
  animation: grain-shift 6s steps(6) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 3%); }
  40%  { transform: translate(3%, -2%); }
  60%  { transform: translate(-3%, -3%); }
  80%  { transform: translate(2%, 2%); }
  100% { transform: translate(0, 0); }
}

/* =========================================================================
   CONTENT — the brand, centred, always. Nothing else lives on this page.
   ========================================================================= */

.content {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vh 8vw;
}

.brand {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(2.75rem, 13vw, 8.5rem);
  line-height: .96;
  letter-spacing: -0.01em;
  color: var(--espresso);
  text-shadow: 0 2px 40px rgba(122, 79, 29, .15);
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft), filter 1s var(--ease-soft);
}
.brand__line { display: block; }

.divider {
  width: clamp(46px, 6vw, 74px);
  height: 1px;
  margin: clamp(1.4rem, 3vh, 2.1rem) 0;
  background: linear-gradient(to right, transparent, var(--wheat), transparent);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity .9s var(--ease-soft), transform 1s var(--ease-soft);
}

.status {
  font-family: 'Jost', 'Century Gothic', Futura, sans-serif;
  font-weight: 500;
  font-size: clamp(.78rem, 1.5vw, 1rem);
  letter-spacing: .38em;
  margin-right: -.38em; /* re-centre: letter-spacing trails the last glyph */
  text-transform: uppercase;
  color: var(--bronze-text);
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft), filter 1s var(--ease-soft);
}

.tagline {
  margin-top: clamp(1rem, 2.4vh, 1.5rem);
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(.85rem, 1.4vw, 1rem);
  letter-spacing: .03em;
  color: rgba(var(--espresso-rgb), .6);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}

/* Staged reveal once the display faces are confirmed ready (see script.js).
   Each element carries its own delay so the page opens like a slow breath. */
html.has-js.fonts-loaded .brand   { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: 0s; }
html.has-js.fonts-loaded .divider { opacity: 1; transform: scaleX(1);     transition-delay: .25s; }
html.has-js.fonts-loaded .status  { opacity: 1; transform: translateY(0); filter: blur(0); transition-delay: .4s; }
html.has-js.fonts-loaded .tagline { opacity: 1; transform: translateY(0); transition-delay: .55s; }

/* No JS? Never trap the brand invisible — show it immediately. */
html:not(.has-js) .brand,
html:not(.has-js) .divider,
html:not(.has-js) .status,
html:not(.has-js) .tagline {
  opacity: 1;
  transform: none;
  filter: none;
}

/* =========================================================================
   RESPONSIVE — desktop, tablet, mobile. The wordmark stays centred always.
   ========================================================================= */

@media (min-width: 640px) {
  .content { padding: 6vh 10vw; }
}

@media (min-width: 1024px) {
  .brand { letter-spacing: -0.015em; }
}

/* Short / landscape phones: guarantee no scroll ever appears. */
@media (max-height: 430px) {
  .content { padding: 3vh 8vw; }
  .brand { font-size: clamp(2.1rem, 9vw, 3.6rem); }
  .divider { margin: .8rem 0; }
  .tagline { margin-top: .5rem; }
}

/* =========================================================================
   ACCESSIBILITY PREFERENCES
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  .status  { color: var(--espresso); }
  .tagline { color: rgba(var(--espresso-rgb), .85); }
}