/*
Theme Name: The Ellsora Coming Soon
Theme URI: https://example.com/
Author: The Ellsora
Description: A single-page "notify me" coming-soon theme for The Ellsora bag collection. Swirl preloader, full-bleed photography with a mobile slideshow, and an email sign-up that saves each entry in WordPress and emails it to the store inbox.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ellsora
*/

/* Layout: one full-bleed photograph, logo centred at the top like a shop window sign,
   copy and form anchored bottom-left (bottom on phones), a small product card bottom-right on desktop. */
:root {
  --ink: #ffffff;              /* text on the photograph */
  --ink-soft: rgba(255,255,255,.78);
  --ink-faint: rgba(255,255,255,.55);
  --line: rgba(255,255,255,.6);
  --shade: 33, 35, 37;         /* warm charcoal pulled from the tundra shadows, used in gradients */
  --ground: #212325;           /* page colour while the photo loads */
  --gold: #c9a86a;             /* the bar on the bag */
  --paper: #f3f0ec;            /* preloader ground */
  --mark: #000000;             /* preloader logo */
  --display: "Bellefair", "Cormorant Garamond", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --caps: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; background: var(--ground); }
.bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; }
.slides { display: none; }
.bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--shade), .38) 0%, rgba(var(--shade), 0) 22%),
    linear-gradient(90deg, rgba(var(--shade), .62) 0%, rgba(var(--shade), .25) 38%, rgba(var(--shade), 0) 58%),
    linear-gradient(0deg, rgba(var(--shade), .55) 0%, rgba(var(--shade), 0) 45%);
}

.page {
  position: relative; z-index: 1;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: max(26px, env(safe-area-inset-top, 0px));
  padding-bottom: max(36px, env(safe-area-inset-bottom, 0px));
  padding-left: max(48px, env(safe-area-inset-left, 0px));
  padding-right: max(48px, env(safe-area-inset-right, 0px));
}

header { display: flex; justify-content: center; }
.logo { width: 150px; height: auto; }

main {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr auto;
  align-items: end;
  gap: 40px;
}
.intro { display: grid; gap: 22px; min-width: 0; }

.season {
  font-family: var(--caps);
  font-stretch: 125%;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: .92;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.lede {
  margin: 0;
  max-width: 34ch;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.38;
  color: var(--ink-soft);
}

form { display: grid; gap: 14px; max-width: 440px; }
.field-label {
  font-family: var(--caps);
  font-stretch: 125%;
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); transition: border-color .2s; }
.row:focus-within { border-color: var(--ink); }
input[type="email"] {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  padding: 10px 0 12px;
}
input[type="email"]::placeholder { color: var(--ink-faint); font-style: italic; }
button {
  flex: none;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink);
  font-family: var(--caps);
  font-stretch: 125%;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 0 0 18px;
}
button:hover .btn-text { border-bottom-color: var(--ink); }
.btn-text { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
button[disabled] { opacity: .6; cursor: progress; }

.small { margin: 0; text-wrap: pretty; font-size: 15px; line-height: 1.4; color: var(--ink-faint); }
.msg { margin: 0; font-size: 16px; line-height: 1.4; min-height: 1.4em; }
.msg.error { color: #f3d3c4; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.thanks { display: grid; gap: 10px; max-width: 440px; }
.thanks h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.1; text-transform: uppercase; }
.thanks p { margin: 0; font-size: 19px; line-height: 1.4; color: var(--ink-soft); }
.thanks .bar { width: 44px; height: 2px; background: var(--gold); }

.card {
  width: 210px;
  background: #f1ece4;
  color: #1c1b18;
  display: grid;
  grid-template-rows: auto 1fr;
}
.card figcaption { padding: 10px 12px 11px; display: grid; gap: 2px; }
.card .name { font-family: var(--serif); font-size: 19px; line-height: 1.1; }
.card .edition { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 15px; color: #5d584f; }
.card img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: 50% 62%; }

footer {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 28px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-family: var(--caps); font-stretch: 125%; font-weight: 500;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Phone: switch to the portrait bag photograph, lift it so the bag clears the copy */
@media (max-width: 760px) {
  body { font-size: 17px; }
  /* Mobile slideshow: three bag photographs crossfading, each lifted so its bag clears the form */
  .desk { display: none; }
  .slides { display: block; position: absolute; inset: 0; }
  .slides img { top: var(--top, 0); height: 100%; object-position: var(--x, 50%) 0; opacity: 0; }
  .slides picture:first-child img { opacity: 1; }
  .bg::after {
    background:
      linear-gradient(180deg, rgba(var(--shade), .55) 0%, rgba(var(--shade), .18) 12%, rgba(var(--shade), 0) 22%),
      linear-gradient(0deg, var(--ground) 0%, var(--ground) 17%, rgba(var(--shade), .6) 27%, rgba(var(--shade), 0) 40%);
  }
  .page {
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-bottom: max(22px, env(safe-area-inset-bottom, 0px));
    padding-left: max(22px, env(safe-area-inset-left, 0px));
    padding-right: max(22px, env(safe-area-inset-right, 0px));
  }
  .logo { width: 132px; }
  main { grid-template-columns: 1fr; gap: 0; }
  .intro { gap: 14px; }
  h1 { font-size: clamp(38px, 11.5vw, 54px); }
  .lede { font-size: 17.5px; }
  .msg { min-height: 0; }
  .msg:empty { display: none; }
  .card { display: none; }
  .season, h1, .lede { display: none; }
  .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  footer { margin-top: 20px; }
}
/* Preloader: the e-swirl writes itself on a paper ground, loops until the page is ready */
.preloader {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--paper);
  transition: opacity .8s cubic-bezier(.4,0,.2,1), visibility 0s linear .8s;
}
.preloader svg { width: min(220px, 56vw); height: auto; overflow: visible; transition: transform .9s cubic-bezier(.4,0,.2,1), opacity .5s ease; }
.preloader path { fill: none; stroke: var(--mark); stroke-width: 18.4; stroke-linecap: round; stroke-linejoin: round; }
body.is-loaded .preloader { opacity: 0; visibility: hidden; }
body.is-loaded .preloader svg { opacity: 0; transform: translateY(-6px) scale(.96); }
html.no-js .preloader { display: none; }

/* 18s loop: each photo holds about 4.5s, then a 1.4s crossfade into the next */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  body.is-loaded .slides img { animation: slide 18s linear infinite both; }
  body.is-loaded .slides picture:nth-child(1) img { animation-delay: -1.44s; }
  body.is-loaded .slides picture:nth-child(2) img { animation-delay: 4.56s; }
  body.is-loaded .slides picture:nth-child(3) img { animation-delay: 10.56s; }
  @keyframes slide {
    0%     { opacity: 0; }
    8%     { opacity: 1; }
    33.33% { opacity: 1; }
    41.33% { opacity: 0; }
    100%   { opacity: 0; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.is-loaded .intro > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  body.is-loaded .intro > *:nth-child(2) { animation-delay: .08s; }
  body.is-loaded .intro > *:nth-child(3) { animation-delay: .16s; }
  body.is-loaded .intro > *:nth-child(4) { animation-delay: .24s; }
  @keyframes rise { from { opacity: .001; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}