/* ============================================================
   3d.css — Home page "Companies Brands" boxes as 3D cartons
   - Logo is printed on every side + the lid of the box
   - Click: the 4 lid flaps (North / East / South / West) open, then the page opens
   Loaded by index.html:  <link rel="stylesheet" href="3d.css">
   Works together with 3d.js (it builds the cube inside each .gallery-card)
   ============================================================ */

/* the old white card becomes a transparent stage */
.gallery-grid .gallery-card.cube3d{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  overflow:visible !important;
  border-radius:0 !important;
  height:auto !important;
  aspect-ratio:1 / 1;
  display:flex !important;
  align-items:center;
  justify-content:center;
  position:relative;
  perspective:900px;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
.gallery-grid .gallery-card.cube3d:hover,
.gallery-grid .gallery-card.cube3d.active{ transform:none !important; box-shadow:none !important; border:none !important; }
.gallery-grid .gallery-card.cube3d.open{ z-index:20; }

/* floor shadow */
.cube3d .c3-shadow{
  position:absolute; left:50%; bottom:10%;
  width:78%; height:12%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,20,60,.30) 0%, rgba(0,20,60,.12) 55%, rgba(0,20,60,0) 72%);
  filter:blur(2px);
  transition:transform .6s ease, opacity .6s ease;
  pointer-events:none;
}
.cube3d.open .c3-shadow{ transform:translateX(-50%) scale(1.15); opacity:.8; }

/* scene + cube */
.cube3d .c3-scene{
  position:relative;
  width:var(--s,120px); height:var(--s,120px);
  margin-top:2%;
  transform-style:preserve-3d;
  pointer-events:none;
}
.cube3d .c3-cube{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(-26deg) rotateY(-40deg);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.cube3d:hover .c3-cube{ transform:rotateX(-28deg) rotateY(-50deg); }
.cube3d.open .c3-cube{ transform:rotateX(-30deg) rotateY(-44deg) translateY(4%); }

/* ---------- 4 side faces + bottom ---------- */
.cube3d .c3-face{ position:absolute; inset:0; transform-style:preserve-3d; }
.cube3d .c3-front { transform:translateZ(calc(var(--s)/2)); }
.cube3d .c3-right { transform:rotateY(90deg)  translateZ(calc(var(--s)/2)); }
.cube3d .c3-back  { transform:rotateY(180deg) translateZ(calc(var(--s)/2)); }
.cube3d .c3-left  { transform:rotateY(-90deg) translateZ(calc(var(--s)/2)); }
.cube3d .c3-bottom{ transform:rotateX(-90deg) translateZ(calc(var(--s)/2)); }

.cube3d .c3-o, .cube3d .c3-i{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
/* outside of the carton (white print surface) */
.cube3d .c3-front .c3-o { background:linear-gradient(160deg,#ffffff 0%,#f1f3f6 100%); }
.cube3d .c3-right .c3-o { background:linear-gradient(160deg,#e9ecf0 0%,#d5dae1 100%); }
.cube3d .c3-left  .c3-o { background:linear-gradient(160deg,#f4f6f8 0%,#e3e7ec 100%); }
.cube3d .c3-back  .c3-o { background:#eceff3; }
.cube3d .c3-bottom .c3-o{ background:#c9ced6; }
.cube3d .c3-o{ box-shadow:inset 0 0 0 1px rgba(0,40,100,.10); }
/* inside of the carton (seen when the lid is open) */
.cube3d .c3-i{
  transform:rotateY(180deg);
  background:linear-gradient(180deg,#cfd6df 0%,#eef1f5 100%);
}
.cube3d .c3-bottom .c3-i{
  background:radial-gradient(circle at 50% 50%, #fff8d6 0%, #f3ecd0 45%, #d9dde3 100%);
}

/* the printed logo */
.cube3d .c3-logo{
  position:absolute; inset:14%;
  background-image:var(--logo);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* ---------- lid: 4 flaps (triangles that meet in the centre) ---------- */
.cube3d .c3-hinge{
  position:absolute; left:50%; top:50%;
  width:0; height:0;
  transform-style:preserve-3d;
}
.cube3d .c3-hinge.n{ transform:translate3d(0, calc(var(--s)/-2), calc(var(--s)/-2)); }
.cube3d .c3-hinge.s{ transform:translate3d(0, calc(var(--s)/-2), calc(var(--s)/ 2)) rotateY(180deg); }
.cube3d .c3-hinge.e{ transform:translate3d(calc(var(--s)/ 2), calc(var(--s)/-2), 0) rotateY(-90deg); }
.cube3d .c3-hinge.w{ transform:translate3d(calc(var(--s)/-2), calc(var(--s)/-2), 0) rotateY(90deg); }

.cube3d .c3-flap{
  position:absolute;
  left:calc(var(--s)/-2); top:0;
  width:var(--s); height:calc(var(--s)/2);
  transform-origin:50% 0;
  transform:rotateX(90deg);
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.25,.9,.3,1.05);
}
.cube3d:hover .c3-flap{ transform:rotateX(100deg); }
.cube3d.open .c3-flap{ transform:rotateX(238deg); }
.cube3d.open .c3-hinge.n .c3-flap{ transition-delay:0s;   }
.cube3d.open .c3-hinge.e .c3-flap{ transition-delay:.07s; }
.cube3d.open .c3-hinge.s .c3-flap{ transition-delay:.14s; }
.cube3d.open .c3-hinge.w .c3-flap{ transition-delay:.21s; }

.cube3d .c3-ff, .cube3d .c3-fb{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  -webkit-clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.cube3d .c3-ff{ overflow:hidden; background:linear-gradient(160deg,#ffffff,#eef1f5); }
.cube3d .c3-fb{ transform:rotateY(180deg); background:linear-gradient(180deg,#bfc7d1,#e4e8ee); }
/* logo for the lid: a full square placed so that the 4 triangles show one big logo */
.cube3d .c3-ff .c3-sq{
  position:absolute; left:0; top:0;
  width:var(--s); height:var(--s);
}
.cube3d .c3-hinge.n .c3-sq{ transform:rotate(0deg); }
.cube3d .c3-hinge.s .c3-sq{ transform:rotate(180deg); }
.cube3d .c3-hinge.e .c3-sq{ transform:rotate(-90deg); }
.cube3d .c3-hinge.w .c3-sq{ transform:rotate(90deg); }

/* plane just below the lid: hides hair-line gaps and glows when the box is open */
.cube3d .c3-lidbase{
  position:absolute; inset:0;
  transform:rotateX(90deg) translateZ(calc(var(--s)/2 - 2px));
  background:linear-gradient(160deg,#eef1f5,#dfe4ea);
  transition:background .6s ease;
}
.cube3d.open .c3-lidbase{
  background:radial-gradient(circle at 50% 50%,#fffbe0 0%,#ffe9a0 55%,#f1d98a 100%);
}

@media (prefers-reduced-motion:reduce){
  .cube3d .c3-cube, .cube3d .c3-flap, .cube3d .c3-shadow{ transition:none !important; }
}

/* ---------- link ticket that comes out of the box and flies into the URL bar ---------- */
.c3-ticket{
  position:fixed; left:0; top:0; z-index:100000;
  display:flex; align-items:center; gap:8px;
  max-width:80vw;
  background:#fff; color:#0b2f63;
  border:2px solid #004aad; border-radius:999px;
  padding:8px 16px 8px 12px;
  font:700 14px/1.2 Arial,sans-serif;
  white-space:nowrap;
  box-shadow:0 10px 28px rgba(0,40,120,.35), 0 0 0 4px rgba(255,214,102,.55);
  pointer-events:none; opacity:0;
  will-change:transform,opacity;
}
.c3-ticket span{ overflow:hidden; text-overflow:ellipsis; }
.c3-ticket .c3-tk-ico{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  background:#004aad;
  -webkit-mask:none; position:relative;
}
.c3-ticket .c3-tk-ico::after{
  content:"\2197"; position:absolute; inset:0;
  color:#fff; font-size:12px; line-height:18px; text-align:center;
}