/* Relix Europe — coming soon
   Colours are sampled from the sunrise photograph: deep water, low sun, warm haze. */

:root{
  --water:#0e1a24;
  --water-deep:#081119;
  --haze:#f3e7d3;
  --amber:#ffb547;
  --ember:#e07a2b;
  --font:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  min-height:100svh;
  background:var(--water-deep);
  color:var(--haze);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- background ---------- */

.scene,
.glow{
  position:fixed;
  inset:0;
  z-index:-2;
}

.scene{
  background:
    /* sky is bright: darken the top so the white logo keeps its edge */
    /* soft scrim behind the message so type stays legible against the sun */
    radial-gradient(58vw 34vh at 50% 34%,
      rgba(8,17,25,.34) 0%,
      rgba(8,17,25,.15) 58%,
      rgba(8,17,25,0) 80%),
    linear-gradient(to bottom,
      rgba(8,17,25,.54) 0%,
      rgba(8,17,25,.20) 26%,
      rgba(8,17,25,.02) 45%,
      rgba(8,17,25,.48) 72%,
      rgba(8,17,25,.90) 100%),
    url("../img/bg.jpg") center 42% / cover no-repeat;
}

/* the low sun, breathing very slowly */
.glow{
  z-index:-1;
  background:radial-gradient(46vw 40vw at 45% 27%,
    rgba(255,181,71,.20) 0%,
    rgba(255,140,50,.09) 42%,
    rgba(255,140,50,0) 70%);
  animation:breathe 14s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{opacity:.75}
  50%{opacity:1}
}

/* ---------- layout ---------- */

.stage{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(2.2rem,6vh,4.5rem) clamp(1rem,4vw,3rem) clamp(1.4rem,3vh,2.4rem);
  gap:clamp(1.6rem,4vh,3rem);
}

.brand{
  animation:rise .9s cubic-bezier(.2,.7,.3,1) both;
}

.logo{
  width:clamp(160px,26vw,300px);
  height:auto;
  display:block;
  filter:drop-shadow(0 4px 22px rgba(0,0,0,.55));
}

/* ---------- message ---------- */

.message{
  margin-top:clamp(.5rem,3vh,2rem);
  animation:rise 1s cubic-bezier(.2,.7,.3,1) .18s both;
}

.message h1{
  font-size:clamp(1.55rem,4.6vw,3.15rem);
  font-weight:300;
  line-height:1.18;
  letter-spacing:-.015em;
  text-shadow:0 2px 26px rgba(8,17,25,.75),0 1px 3px rgba(8,17,25,.5);
}

.address{
  margin-top:clamp(1rem,2.4vh,1.6rem);
  display:inline-block;
  padding-bottom:.4em;
  font-size:clamp(.95rem,2vw,1.25rem);
  font-weight:500;
  letter-spacing:.16em;
  color:#ffd39a;
  text-shadow:0 2px 4px rgba(8,17,25,.9),0 2px 24px rgba(8,17,25,.85);
  border-bottom:1px solid rgba(255,181,71,.55);
}

/* ---------- product range ---------- */

.range{
  margin-top:auto;
  width:100%;
  max-width:1240px;
  animation:rise 1.1s cubic-bezier(.2,.7,.3,1) .42s both;
}

.range-intro{
  font-size:clamp(.72rem,1.5vw,.85rem);
  letter-spacing:.08em;
  color:rgba(243,231,211,.72);
  margin-bottom:clamp(1rem,2.6vh,1.8rem);
}

.cats{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(1.4rem,2.6vw,2.2rem);
}

.cat + .cat{
  /* hairline separates the categories, so the grouping is readable at a glance */
  border-left:1px solid rgba(243,231,211,.16);
  padding-left:clamp(1.4rem,2.6vw,2.2rem);
}

.items{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(.6rem,1.5vw,1.2rem);
  min-height:clamp(52px,6.4vw,74px);
}

.p{
  width:auto;
  filter:drop-shadow(0 8px 16px rgba(8,17,25,.55));
}

.reel{height:clamp(50px,6.2vw,72px)}
.line{height:clamp(43px,5.2vw,60px)}
.box{height:clamp(44px,5.4vw,63px)}
.lead{height:clamp(26px,3.1vw,36px)}

.cat-name{
  margin-top:clamp(.7rem,1.6vh,1.1rem);
  font-size:clamp(.7rem,1.4vw,.82rem);
  letter-spacing:.05em;
  color:rgba(243,231,211,.78);
}

/* ---------- footer ---------- */

.foot{
  margin-top:clamp(1.6rem,4vh,2.6rem);
  font-size:.72rem;
  letter-spacing:.05em;
  color:rgba(243,231,211,.42);
}

/* ---------- motion ---------- */

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* ---------- tablets: two by two, so no category is left dangling ---------- */

@media (max-width:1099px) and (min-width:700px){
  .cats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(1.6rem,3.2vh,2.4rem) 1.5rem;
    justify-items:center;
    align-items:end;
  }
  .cat + .cat{border-left:0;padding-left:0}
  .cat:nth-child(-n+2){
    padding-bottom:clamp(1.4rem,2.8vh,2rem);
    border-bottom:1px solid rgba(243,231,211,.14);
  }
  .reel{height:66px}
  .line{height:56px}
  .box{height:58px}
  .lead{height:34px}
}

/* ---------- small screens ---------- */

@media (max-width:699px){
  .scene{
    background:
      linear-gradient(to bottom,
        rgba(8,17,25,.56) 0%,
        rgba(8,17,25,.14) 18%,
        rgba(8,17,25,.34) 31%,
        rgba(8,17,25,.72) 50%,
        rgba(8,17,25,.90) 74%,
        rgba(8,17,25,.95) 100%),
      url("../img/bg-mobile.jpg") center 38% / cover no-repeat;
    background-attachment:scroll;
  }
  .glow{background:radial-gradient(70vw 50vw at 50% 24%,
    rgba(255,181,71,.20) 0%,
    rgba(255,140,50,.08) 45%,
    rgba(255,140,50,0) 72%)}

  .stage{gap:clamp(1.2rem,3vh,2rem)}
  .message h1{font-size:clamp(1.35rem,6.4vw,2rem)}
  .address{font-size:.95rem;letter-spacing:.12em}

  .range{margin-top:clamp(1.8rem,5vh,3rem)}
  .range-intro{margin-bottom:1.1rem}
  .cats{gap:1.35rem}
  .cat{width:100%}
  .cat + .cat{
    border-left:0;
    padding-left:0;
    padding-top:1.35rem;
    border-top:1px solid rgba(243,231,211,.14);
  }
  .items{gap:.75rem;min-height:0}
  .reel{height:64px}
  .line{height:56px}
  .box{height:56px}
  .lead{height:34px}
  .cat-name{margin-top:.55rem;font-size:.72rem}
}

@media (max-width:360px){
  .reel{height:54px}
  .line{height:47px}
  .box{height:47px}
  .lead{height:29px}
}

/* landscape phones: keep everything on one screen */
@media (max-height:520px) and (orientation:landscape){
  .stage{padding-top:1.4rem;gap:1rem}
  .logo{width:150px}
  .message{margin-top:0}
  .reel{height:52px}
  .line{height:45px}
  .box{height:46px}
  .lead{height:27px}
}

@media (prefers-reduced-motion:reduce){
  .brand,.message,.range{animation:none}
  .glow{animation:none;opacity:.9}
}