/* ============================================================
   TO NIE FABRYKA — coming-soon landing ("Bez scrolla" / one view).
   Ported from the Docs Toniefabryka design canvas (LiveOnePage,
   direction 01x). Container-query fluid: the .tnf frame fills the
   viewport and everything scales to it via cqw/cqh. Desktop holds
   one view; short windows and mobile scroll. Jost (tracked sans) +
   Cormorant Garamond (italic serif voice). Self-hosted fonts.
   ============================================================ */

@import url("./fonts.css");

*, *::before, *::after { box-sizing: border-box; }
/* The JS live/countdown toggle uses the `hidden` attribute; class rules below
   set display:flex, which out-specifies the UA [hidden] rule — force it. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { background: #0a0a0a; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; overflow-x: hidden; }

/* ---- the frame ---- */
.tnf {
  position: relative;
  width: 100%;
  /* Desktop: one viewport. min-height guards short windows (the page
     scrolls instead of clipping). */
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  container-type: size;
  container-name: frame;
  display: flex;
  flex-direction: column;

  --black:   #0a0a0a;
  --ink:     #101010;
  --white:   #ffffff;
  --paper:   #f6f5f2;
  --paper-2: #eceae4;
  --charcoal:  #16161a;
  --charcoal-2:#26262c;
  --gold:    #a98a4b;
  --gold-2:  #c4a86e;
  --live:    #cf2340;
  --muted-d: rgba(255,255,255,0.60);
  --muted-l: #6e6a63;
  --line-d:  rgba(255,255,255,0.20);
  --line-l:  rgba(10,10,10,0.16);

  font-family: "Jost", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tnf *, .tnf *::before, .tnf *::after { margin: 0; padding: 0; box-sizing: border-box; }
.tnf img { display: block; }
.tnf a { color: inherit; text-decoration: none; }
.tnf em { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; text-transform: none; }

/* ---- shared primitives ---- */
.tnf .eyebrow {
  font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.42em; line-height: 1;
  font-size: clamp(8.5px, 0.92cqw, 12px);
}
.tnf .cta {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-weight: 400; text-transform: uppercase; letter-spacing: 0.26em;
  font-size: clamp(9px, 0.95cqw, 12.5px);
  padding-bottom: 6px; position: relative; white-space: nowrap;
  cursor: pointer;
}
.tnf .cta::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; opacity: 0.5; transform-origin: left;
  transition: opacity .4s, transform .5s cubic-bezier(.2,.7,.3,1);
}
.tnf .cta:hover::after { opacity: 1; transform: scaleX(1.04); }
.tnf .cta .arrow { display: inline-block; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.tnf .cta:hover .arrow { transform: translateX(4px); }

.tnf .topbar {
  flex: 0 0 auto; z-index: 6;
  height: clamp(28px, 3.6cqw, 46px);
  display: flex; align-items: center; justify-content: center;
  background: var(--black); color: var(--white);
  font-size: clamp(7.5px, 0.82cqw, 11px);
  letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap;
  padding: 0 16px;
}
.tnf .topbar .sep { color: var(--gold-2); margin: 0 0.9em; }

.tnf .media { position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--charcoal-2) 0%, var(--charcoal) 68%); }
.tnf .media::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 30% 18%, rgba(255,255,255,0.06), transparent 60%); }

.tnf .mark { width: 100%; height: auto; }
.tnf .mark--light { filter: invert(1) brightness(2.4); }

/* live pill + dot */
.tnf .live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--live); color: var(--white);
  font-size: clamp(8.5px, 0.8cqw, 10.5px); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 11px 6px 9px; border-radius: 999px;
}
.tnf .live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--white); }

/* notify form */
.tnf .notify { display: flex; flex-direction: column; gap: clamp(9px,1cqw,13px); width: 100%; max-width: 470px; }
.tnf .notify-legend { color: var(--muted-l); font-size: clamp(8.5px,0.9cqw,11.5px);
  letter-spacing: 0.24em; text-transform: uppercase; }
.tnf .notify-row { display: flex; align-items: stretch; gap: clamp(8px,1cqw,14px); }
.tnf .notify input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: none; outline: none;
  border-bottom: 1px solid rgba(10,10,10,0.35); border-radius: 0;
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: clamp(12.5px,1.15cqw,15.5px); letter-spacing: 0.04em;
  color: var(--ink); padding: 10px 2px;
}
.tnf .notify input::placeholder { color: var(--muted-l); opacity: .8; }
.tnf .notify input:focus { border-bottom-color: var(--ink); }
.tnf .notify button {
  flex: 0 0 auto; cursor: pointer; border: none;
  background: var(--black); color: var(--white);
  font-family: "Jost", sans-serif; font-weight: 400;
  font-size: clamp(9px,0.9cqw,11px); letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0 clamp(16px,2cqw,26px); height: clamp(40px,4.4cqw,48px);
  transition: background .35s;
}
.tnf .notify button:hover { background: var(--gold); }
/* honest-placeholder note revealed on submit (see landing.js) */
.tnf .notify-note { color: var(--muted-l); font-size: clamp(9.5px,0.92cqw,12px);
  letter-spacing: 0.02em; line-height: 1.5; }
.tnf .notify-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--gold); }
.tnf .notify-note[hidden] { display: none; }

/* ---- phone (from direction 01 · Na żywo) ---- */
.tnf .phone { position: relative; height: min(76cqh, 74cqmin * 2.0); aspect-ratio: 9 / 18.6;
  max-width: 86cqw; background: #000; border: 1px solid rgba(255,255,255,0.22);
  border-radius: clamp(26px,3.2cqw,44px); padding: clamp(6px,0.8cqw,10px);
  box-shadow: 0 40px 90px rgba(0,0,0,0.5); }
.tnf .phone-screen { position: absolute; inset: clamp(6px,0.8cqw,10px);
  border-radius: clamp(20px,2.5cqw,34px); overflow: hidden; }
.tnf .phone-screen .live-pill { position: absolute; top: clamp(10px,1.2cqw,16px); left: clamp(10px,1.2cqw,16px); z-index: 4; }
.tnf .phone-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px;
  padding: clamp(30px,3.4cqw,44px) clamp(10px,1.3cqw,16px) clamp(10px,1.3cqw,16px);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.62)); }
.tnf .phone-ask { flex: 1 1 auto; min-width: 0; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px;
  color: rgba(255,255,255,0.72); font-size: clamp(9px,0.95cqw,11.5px); letter-spacing: 0.06em;
  padding: clamp(7px,0.9cqw,10px) clamp(11px,1.3cqw,15px); font-weight: 300;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnf .phone-heart { flex: 0 0 auto; width: clamp(28px,3.2cqw,36px); height: clamp(28px,3.2cqw,36px);
  border: 1px solid rgba(255,255,255,0.4); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85); font-size: clamp(12px,1.3cqw,15px); }
.tnf .float-heart { position: absolute; z-index: 3; right: clamp(16px,2cqw,24px);
  bottom: clamp(60px,7cqw,86px); color: rgba(255,255,255,0.85);
  font-size: clamp(12px,1.4cqw,16px); opacity: 0; pointer-events: none; }
.tnf .float-heart.fh2 { right: clamp(30px,3.6cqw,44px); color: var(--gold-2); font-size: clamp(10px,1.1cqw,13px); }

/* ---- hero text (shared with direction 01) ---- */
.tnf .lv-top { display: flex; align-items: center; justify-content: space-between; }
.tnf .lv-mark { width: clamp(104px, 12.5cqw, 190px); }
.tnf .lv-issue { color: var(--muted-l); font-size: clamp(8px,0.9cqw,11px);
  letter-spacing: 0.24em; text-transform: uppercase; }
.tnf .lv-eyebrow { color: var(--gold); }
.tnf .lv-head { font-weight: 300; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: clamp(30px, 4.4cqw, 64px); line-height: 1.02; color: var(--ink); }
.tnf .lv-head em { font-size: 1.12em; letter-spacing: 0.005em; }
.tnf .lv-sub { font-weight: 300; font-size: clamp(12.5px,1.25cqw,17.5px); line-height: 1.62;
  color: var(--muted-l); max-width: 42ch; letter-spacing: 0.01em; }
.tnf .lv-caption { color: var(--muted-d); text-align: center;
  font-size: clamp(8.5px,0.92cqw,11.5px); letter-spacing: 0.24em; text-transform: uppercase;
  max-width: 46ch; line-height: 1.8; }

/* ---- countdown cells (from direction 01 extended) ---- */
.tnf .lx-cell { display: flex; flex-direction: column; gap: 7px; }
.tnf .lx-num { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-style: normal; font-size: clamp(38px, 4.6cqw, 74px); line-height: 0.95;
  color: var(--white); font-variant-numeric: tabular-nums; }
.tnf .lx-lab { font-size: clamp(8px, 0.85cqw, 11px); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--muted-d); }

/* ============================================================
   01x · BEZ SCROLLA — one-viewport merge: hero + live + steps.
   Studio photo is the stage behind the phone; lights up on live.
   ============================================================ */
.tnf--op .op-main { flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 55% 45%;
  grid-template-areas: "panel stage"; }
.tnf--op .op-panel { grid-area: panel; background: var(--paper); min-height: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(12px, 1.4cqw, 20px);
  padding: clamp(18px, 2.4cqw, 40px) clamp(22px, 3.4cqw, 56px); }
.tnf--op .op-mid { display: flex; flex-direction: column; gap: clamp(11px, 1.3cqw, 19px); }
.tnf--op .op-head { font-size: clamp(26px, 3.5cqw, 50px); }
.tnf--op .op-sub { font-size: clamp(11.5px, 1.08cqw, 15px); max-width: 48ch; }
.tnf--op .notify { max-width: 430px; }

.tnf--op .op-live { border-top: 1px solid var(--line-l);
  padding-top: clamp(11px, 1.3cqw, 18px);
  display: flex; flex-direction: column; gap: clamp(9px, 1.1cqw, 15px); }
.tnf--op .op-live-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tnf--op .op-live-eyebrow { color: var(--gold); }
.tnf--op .op-when { font-size: clamp(9px, 0.95cqw, 12.5px); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.tnf--op .op-count { display: flex; gap: clamp(16px, 2.4cqw, 40px); }
.tnf--op .op-count .lx-num { color: var(--ink); font-size: clamp(28px, 3cqw, 46px); }
.tnf--op .op-count .lx-lab { color: var(--muted-l); }
.tnf--op .op-live-now { display: flex; align-items: center; gap: 13px;
  color: var(--ink); font-size: clamp(11px, 1.05cqw, 14.5px); font-weight: 300;
  letter-spacing: 0.05em; padding: clamp(6px, 0.8cqw, 12px) 0; }
.tnf--op .op-live-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tnf--op .op-live-foot .cta { color: var(--ink); }
.tnf--op .op-sched { font-size: clamp(8.5px, 0.85cqw, 11px); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-l); white-space: nowrap; }

.tnf--op .op-stage { grid-area: stage; position: relative; overflow: hidden; container-type: size;
  background: var(--charcoal);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 1.5cqw, 20px); padding: clamp(14px, 1.8cqw, 28px); }
.tnf--op .op-bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity 1.4s ease; }
.tnf--op .op-scrim { position: absolute; inset: 0; pointer-events: none; transition: opacity 1.4s ease;
  background: linear-gradient(180deg, rgba(10,10,10,0.5), rgba(10,10,10,0.22) 38%, rgba(10,10,10,0.6)); }
.tnf--op .phone { position: relative; z-index: 2; height: min(72cqh, 74cqmin * 2.0); }
.tnf--op .op-caption { position: relative; z-index: 2; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }

.tnf--op .op-steps { flex: 0 0 auto; background: var(--black); color: var(--white);
  display: grid; grid-template-columns: auto 1fr 1fr 1fr;
  gap: clamp(18px, 2.8cqw, 52px); align-items: center;
  padding: clamp(13px, 1.7cqw, 25px) clamp(22px, 3.4cqw, 56px);
  border-top: 1px solid rgba(255,255,255,0.08); }
.tnf--op .op-steps-eyebrow { color: var(--gold-2); line-height: 1.7; max-width: 11ch; }
.tnf--op .op-step { display: flex; align-items: baseline; gap: clamp(10px, 1.2cqw, 16px); }
.tnf--op .op-step em { color: var(--gold-2); font-weight: 500; line-height: 1;
  font-size: clamp(20px, 2cqw, 32px); }
.tnf--op .op-step h3 { font-weight: 400; text-transform: uppercase; letter-spacing: 0.22em;
  font-size: clamp(9px, 0.85cqw, 12px); margin-bottom: clamp(4px, 0.4cqw, 7px); color: var(--white); }
.tnf--op .op-step p { font-weight: 300; font-size: clamp(10px, 0.88cqw, 12.5px);
  line-height: 1.5; color: var(--muted-d); max-width: 32ch; }

/* ------------------------------------------------------------
   Mobile: the frame stops being a fixed one-view box and scrolls.
   Switch the query container to inline-size (width queries still
   fire; height becomes content-driven) and replace the one cqh
   value (phone height) that needs size containment.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .tnf {
    container-type: inline-size;
    height: auto;
    min-height: 100dvh;
  }
  .tnf--op .op-main { grid-template-columns: 1fr;
    grid-template-rows: minmax(430px, 1fr) auto; grid-template-areas: "stage" "panel"; }
  .tnf--op .op-stage { padding: 18px; gap: 12px; }
  .tnf--op .phone { height: min(58vh, 116vw); }
  .tnf--op .op-panel { padding: 24px 22px 26px; gap: 18px; }
  .tnf--op .lv-mark { width: 104px; }
  .tnf--op .op-mid { gap: 12px; }
  .tnf--op .op-head { font-size: clamp(24px, 8cqw, 34px); }
  .tnf--op .op-sub { font-size: 12.5px; line-height: 1.55; max-width: none; }
  .tnf--op .notify { max-width: none; }
  .tnf--op .op-live { padding-top: 14px; gap: 12px; }
  .tnf--op .op-live-head { flex-wrap: wrap; gap: 4px 12px; }
  .tnf--op .op-when { white-space: normal; }
  .tnf--op .op-count { gap: 22px; }
  .tnf--op .op-count .lx-num { font-size: 34px; }
  .tnf--op .op-count .lx-lab { font-size: 8px; letter-spacing: 0.26em; }
  .tnf--op .op-live-foot { flex-wrap: wrap; gap: 8px 14px; }
  .tnf--op .op-steps { grid-template-columns: 1fr; gap: 15px;
    align-items: start; padding: 22px 22px 24px; }
  .tnf--op .op-steps-eyebrow { max-width: none; margin-bottom: 2px; }
  .tnf--op .op-step { gap: 12px; }
  .tnf--op .op-step em { font-size: 20px; }
  .tnf--op .op-step h3 { font-size: 10px; margin-bottom: 5px; }
  .tnf--op .op-step p { font-size: 11.5px; max-width: none; }
}

/* ============================================================
   MOTION — quiet entrances; base = end-state; gated on reduced motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ef-fade    { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ef-rise    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes ef-rise-sm { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  @keyframes tnf-pulse  { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: 0.55; } }
  @keyframes tnf-float  { 0% { transform: translateY(0) translateX(0); opacity: 0; }
                          12% { opacity: 0.9; }
                          70% { opacity: 0.5; }
                          100% { transform: translateY(-140px) translateX(-8px); opacity: 0; } }

  .tnf .live-pill i { animation: tnf-pulse 1.6s ease-in-out infinite; }

  .tnf--op .topbar   { animation: ef-fade 1.2s .05s both; }
  .tnf--op .lv-top   { animation: ef-rise-sm 1s .25s both cubic-bezier(.2,.7,.3,1); }
  .tnf--op .lv-eyebrow { animation: ef-rise-sm 1s .4s both cubic-bezier(.2,.7,.3,1); }
  .tnf--op .lv-head  { animation: ef-rise 1.1s .5s both cubic-bezier(.2,.7,.3,1); }
  .tnf--op .lv-sub   { animation: ef-rise-sm 1s .68s both cubic-bezier(.2,.7,.3,1); }
  .tnf--op .notify   { animation: ef-rise-sm 1s .84s both cubic-bezier(.2,.7,.3,1); }
  .tnf--op .op-live  { animation: ef-fade 1.4s 1.05s both; }
  .tnf--op .op-stage { animation: ef-fade 1s .1s both; }
  .tnf--op .phone    { animation: ef-rise 1.2s .45s both cubic-bezier(.2,.7,.3,1); }
  .tnf--op .op-caption { animation: ef-fade 1.4s 1.15s both; }
  .tnf--op .op-steps { animation: ef-fade 1.4s 1.2s both; }
  .tnf--op .float-heart.fh1 { animation: tnf-float 5.6s 1.4s ease-out infinite; }
  .tnf--op .float-heart.fh2 { animation: tnf-float 6.8s 3.2s ease-out infinite; }
}